我同时使用vuex和vuejs 2。
我是vuex的新手，我想看一个商店变量的变化。
我想在我的vue组件中添加手表功能
这是我目前所拥有的:
import Vue from 'vue';
import {
MY_STATE,
} from './../../mutation-types';
export default {
[MY_STATE](state, token) {
state.my_state = token;
},
};
我想知道my_state是否有任何变化
我怎么看店。My_state在我的vuejs组件?
当前回答
我想提问者想用带有Vuex的手表。
this.$store.watch(
(state)=>{
return this.$store.getters.your_getter
},
(val)=>{
//something changed do something
},
{
deep:true
}
);
其他回答
如果你使用typescript，那么你可以:
import {Watch} from "vue-property-decorator"; ．． @Watch (" $ store.state.something”) private watchSomething() { //使用这个。$store.state。可以访问的东西 .．. ｝
您还可以在vue组件中使用mapState来直接从存储中获取状态。
在你的组件中:
computed: mapState([
'my_state'
])
其中my_state是存储中的变量。
当你想要在状态级别上观看时，可以这样做:
let App = new Vue({
//...
store,
watch: {
'$store.state.myState': function (newVal) {
console.log(newVal);
store.dispatch('handleMyStateChange');
}
},
//...
});
如果您只是想监视一个状态属性，然后根据该属性的变化在组件中进行相应的操作，请参阅下面的示例。
在store.js:
export const state = () => ({
isClosed: false
})
export const mutations = {
closeWindow(state, payload) {
state.isClosed = payload
}
}
在这个场景中，我创建了一个布尔状态属性，我将在应用程序的不同地方更改，如下所示:
this.$store.commit('closeWindow', true)
现在，如果我需要在其他组件中监视状态属性，然后更改本地属性，我会在挂载的钩子中写入以下内容:
mounted() {
this.$store.watch(
state => state.isClosed,
(value) => {
if (value) { this.localProperty = 'edit' }
}
)
}
首先，我在状态属性上设置了一个监视器，然后在回调函数中，我使用该属性的值来更改localProperty。
我希望这能有所帮助!
在组件内部，创建一个计算函数
computed:{
myState:function(){
return this.$store.state.my_state; // return the state value in `my_state`
}
}
现在可以观察计算出的函数名，比如
watch:{
myState:function(newVal,oldVal){
// this function will trigger when ever the value of `my_state` changes
}
}
在vuex状态my_state中所做的更改将反映在计算函数myState中，并触发手表函数。
如果状态my_state包含嵌套数据，则处理程序选项将提供更多帮助
watch:{
myState:{
handler:function(newVal,oldVal){
// this function will trigger when ever the value of `my_state` changes
},
deep:true
}
}
这将监视my_state存储中的所有嵌套值。
