vue.js 2 cách xem giá trị cửa hàng từ vuex

Tôi đang sử dụng vuexvà vuejs 2cùng nhau.

Tôi mới đến vuex, tôi muốn xem một storesự thay đổi.

Tôi muốn thêm watchchức năng trongvue component

Đây là những gì tôi có cho đến nay:

import Vue from 'vue';
import {
  MY_STATE,
} from './../../mutation-types';

export default {
  [MY_STATE](state, token) {
    state.my_state = token;
  },
};

Tôi muốn biết nếu có bất kỳ thay đổi trong my_state

Làm thế nào để tôi xem store.my_statetrong thành phần vuejs của tôi?

Ví dụ, giả sử bạn có một giỏ trái cây và mỗi lần bạn thêm hoặc loại bỏ một loại trái cây khỏi giỏ, bạn muốn (1) hiển thị thông tin về số lượng trái cây, nhưng bạn cũng (2) muốn được thông báo về số lượng trái cây trong một số thời trang ưa thích ...

trái cây-đếm-thành phần.vue

<template>
  <!-- We meet our first objective (1) by simply -->
  <!-- binding to the count property. -->
  <p>Fruits: {{ count }}</p>
</template>

<script>
import basket from '../resources/fruit-basket'

export default () {
  computed: {
    count () {
      return basket.state.fruits.length
      // Or return basket.getters.fruitsCount
      // (depends on your design decisions).
    }
  },
  watch: {
    count (newCount, oldCount) {
      // Our fancy notification (2).
      console.log(`We have ${newCount} fruits now, yay!`)
    }
  }
}
</script>

Xin lưu ý rằng tên của hàm trong watchđối tượng, phải khớp với tên của hàm trong computedđối tượng. Trong ví dụ trên tên là count.

Các giá trị mới và cũ của thuộc tính được xem sẽ được chuyển vào hàm gọi lại theo dõi (hàm đếm) dưới dạng tham số.

Cửa hàng giỏ có thể trông như thế này:

fruit-Basket.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const basket = new Vuex.Store({
  state: {
    fruits: []
  },
  getters: {
    fruitsCount (state) {
      return state.fruits.length
    }
  }
  // Obviously you would need some mutations and actions,
  // but to make example cleaner I'll skip this part.
})

export default basket

Bạn có thể đọc thêm trong các tài nguyên sau:

• Tính toán và theo dõi
• Tài liệu API: được tính toán
• Tài liệu API: xem

Bạn không nên sử dụng người theo dõi thành phần để lắng nghe sự thay đổi trạng thái. Tôi khuyên bạn nên sử dụng các hàm getters và sau đó ánh xạ chúng bên trong thành phần của bạn.

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters({
      myState: 'getMyState'
    })
  }
}

Trong cửa hàng của bạn:

const getters = {
  getMyState: state => state.my_state
}

Bạn sẽ có thể lắng nghe mọi thay đổi được thực hiện cho cửa hàng của mình bằng cách sử dụng this.myState trong thành phần của bạn.

https://vuex.vuejs.org/en/getters.html#the-mapgetters-rcper

Nó đơn giản như:

watch: {
  '$store.state.drawer': function() {
    console.log(this.$store.state.drawer)
  }
}

Như đã đề cập ở trên, không nên xem các thay đổi trực tiếp trong cửa hàng

Nhưng trong một số trường hợp rất hiếm, nó có thể hữu ích cho ai đó, vì vậy tôi sẽ để lại câu trả lời này. Đối với các trường hợp khác, vui lòng xem câu trả lời @ gabriel-robert

Bạn có thể làm điều này thông qua state.$watch. Thêm điều này trong phương thức của bạn created(hoặc nơi bạn cần thực thi) trong thành phần

this.$store.watch(
    function (state) {
        return state.my_state;
    },
    function () {
        //do something on data change
    },
    {
        deep: true //add this if u need to watch object properties change etc.
    }
);

Thêm chi tiết: https://vuex.vuejs.org/api/#watch

Tôi nghĩ rằng người hỏi muốn sử dụng đồng hồ với Vuex.

this.$store.watch(
      (state)=>{
        return this.$store.getters.your_getter
      },
      (val)=>{
       //something changed do something

      },
      {
        deep:true
      }
      );

Điều này dành cho tất cả những người không thể giải quyết vấn đề của họ bằng getters và thực sự cần một người theo dõi, ví dụ như nói chuyện với những thứ bên thứ ba không hợp lý (xem Vue Watchers khi nào nên sử dụng người theo dõi).

Cả hai bộ theo dõi và giá trị tính toán của thành phần Vue cũng hoạt động trên các giá trị được tính toán. Vì vậy, nó không khác với vuex:

import { mapState } from 'vuex';

export default {
    computed: {
        ...mapState(['somestate']),
        someComputedLocalState() {
            // is triggered whenever the store state changes
            return this.somestate + ' works too';
        }
    },
    watch: {
        somestate(val, oldVal) {
            // is triggered whenever the store state changes
            console.log('do stuff', val, oldVal);
        }
    }
}

nếu chỉ kết hợp trạng thái cục bộ và toàn cầu, tài liệu của mapState cũng cung cấp một ví dụ:

computed: {
    ...mapState({
        // to access local state with `this`, a normal function must be used
        countPlusLocalState (state) {
          return state.count + this.localCount
        }
    }
})

nếu bạn sử dụng bản in thì bạn có thể:

import { Watch } from "vue-property-decorator";

..

@Watch("$store.state.something")
private watchSomething() {
   // use this.$store.state.something for access
   ...
}

Tạo trạng thái Địa phương của biến cửa hàng của bạn bằng cách xem và thiết lập thay đổi giá trị. Sao cho biến cục bộ thay đổi cho mô hình v đầu vào mẫu không trực tiếp làm biến đổi biến lưu trữ .

data() {
  return {
    localState: null
  };
 },
 computed: {
  ...mapGetters({
    computedGlobalStateVariable: 'state/globalStateVariable'
  })
 },
 watch: {
  computedGlobalStateVariable: 'setLocalState'
 },
 methods: {
  setLocalState(value) {
   this.localState = Object.assign({}, value);
  }
 }

Cách tốt nhất để theo dõi các thay đổi của cửa hàng là sử dụng mapGettersnhư Gabriel nói. Nhưng có một trường hợp khi bạn không thể thực hiện được, mapGettersví dụ: bạn muốn lấy thứ gì đó từ cửa hàng bằng tham số:

getters: {
  getTodoById: (state, getters) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}

trong trường hợp đó bạn không thể sử dụng mapGetters. Thay vào đó, bạn có thể thử làm một cái gì đó như thế này:

computed: {
    todoById() {
        return this.$store.getters.getTodoById(this.id)
    }
}

Nhưng thật không may todoById sẽ chỉ được cập nhật nếu this.idđược thay đổi

Nếu bạn muốn bạn cập nhật thành phần trong trường hợp đó, hãy sử dụng this.$store.watch giải pháp do Gong cung cấp . Hoặc xử lý thành phần của bạn một cách có ý thức và cập nhật this.idkhi bạn cần cập nhật todoById.

Nếu bạn chỉ muốn xem một tài sản nhà nước và sau đó hành động trong thành phần tương ứng với những thay đổi của tài sản đó thì hãy xem ví dụ dưới đây.

Trong store.js:

export const state = () => ({
 isClosed: false
})
export const mutations = {
 closeWindow(state, payload) {
  state.isClosed = payload
 }
}

Trong kịch bản này, tôi đang tạo một booleantài sản nhà nước mà tôi sẽ thay đổi ở những nơi khác nhau trong ứng dụng như sau:

this.$store.commit('closeWindow', true)

Bây giờ, nếu tôi cần xem thuộc tính trạng thái đó trong một số thành phần khác và sau đó thay đổi thuộc tính cục bộ, tôi sẽ viết như sau trong mountedhook:

mounted() {
 this.$store.watch(
  state => state.isClosed,
  (value) => {
   if (value) { this.localProperty = 'edit' }
  }
 )
}

Đầu tiên, tôi đang thiết lập trình theo dõi trên thuộc tính trạng thái và sau đó trong chức năng gọi lại, tôi sử dụng valuethuộc tính đó để thay đổilocalProperty .

Tôi hy vọng nó sẽ giúp!

Khi bạn muốn xem ở cấp tiểu bang, có thể thực hiện theo cách này:

let App = new Vue({
    //...
    store,
    watch: {
        '$store.state.myState': function (newVal) {
            console.log(newVal);
            store.dispatch('handleMyStateChange');
        }
    },
    //...
});

Bạn có thể sử dụng kết hợp các hành động , getters , thuộc tính và trình theo dõi của Vuex để lắng nghe những thay đổi trên giá trị trạng thái Vuex.

Mã HTML:

<div id="app" :style='style'>
  <input v-model='computedColor' type="text" placeholder='Background Color'>
</div>

Mã JavaScript:

'use strict'

Vue.use(Vuex)

const { mapGetters, mapActions, Store } = Vuex

new Vue({
    el: '#app',
  store: new Store({
    state: {
      color: 'red'
    },
    getters: {
      color({color}) {
        return color
      }
    },
    mutations: {
      setColor(state, payload) {
        state.color = payload
      }
    },
    actions: {
      setColor({commit}, payload) {
        commit('setColor', payload)
      }
    }
  }),
  methods: {
    ...mapGetters([
        'color'
    ]),
    ...mapActions([
        'setColor'
    ])
  },
  computed: {
    computedColor: {
        set(value) {
        this.setColor(value)
      },
      get() {
        return this.color()
      }
    },
    style() {
        return `background-color: ${this.computedColor};`
    }
  },
  watch: {
    computedColor() {
        console.log(`Watcher in use @${new Date().getTime()}`)
    }
  }
})

Xem bản demo của JSFiddle .

Bạn cũng có thể đăng ký các đột biến cửa hàng:

store.subscribe((mutation, state) => {
  console.log(mutation.type)
  console.log(mutation.payload)
})

https://vuex.vuejs.org/api/#subscribe

Bên trong thành phần, tạo một hàm tính toán

computed:{
  myState:function(){
    return this.$store.state.my_state; // return the state value in `my_state`
  }
}

Bây giờ tên hàm tính toán có thể được xem, như

watch:{
  myState:function(newVal,oldVal){
    // this function will trigger when ever the value of `my_state` changes
  }
}

Những thay đổi được thực hiện trong vuextrạng thái my_statesẽ phản ánh trong hàm tính toánmyState và kích hoạt chức năng đồng hồ.

Nếu trạng thái my_statecó dữ liệu lồng nhau, thì handlertùy chọn sẽ giúp nhiều hơn

watch:{
  myState:{
    handler:function(newVal,oldVal){
      // this function will trigger when ever the value of `my_state` changes
    },
    deep:true
  }
}

Điều này sẽ xem tất cả các giá trị lồng nhau trong cửa hàng my_state.

Bạn cũng có thể sử dụng mapState trong thành phần vue của mình để nhận trạng thái trực tiếp từ cửa hàng.

Trong thành phần của bạn:

computed: mapState([
  'my_state'
])

Trường hợp my_statelà một biến từ các cửa hàng.

Tôi đã sử dụng cách này và nó hoạt động:

store.js:

const state = {
  createSuccess: false
};

mutations.js

[mutations.CREATE_SUCCESS](state, payload) {
    state.createSuccess = payload;
}

Action.js

async [mutations.STORE]({ commit }, payload) {
  try {
    let result = await axios.post('/api/admin/users', payload);
    commit(mutations.CREATE_SUCCESS, user);
  } catch (err) {
    console.log(err);
  }
}

getters.js

isSuccess: state => {
    return state.createSuccess
}

Và trong thành phần của bạn, nơi bạn sử dụng trạng thái từ cửa hàng:

watch: {
    isSuccess(value) {
      if (value) {
        this.$notify({
          title: "Success",
          message: "Create user success",
          type: "success"
        });
      }
    }
  }

Khi người dùng gửi biểu mẫu, hành động STORE sẽ được gọi, sau khi tạo thành công, đột biến CREATE_SUCCESS được cam kết sau đó. Rẽ createSuccess là đúng và trong thành phần, trình theo dõi sẽ thấy giá trị đã thay đổi và kích hoạt thông báo.

isSuccess phải khớp với tên bạn khai báo trong getters.js