我使用vuex和vuejs 2在一起.
我是新手vuex,我想看一个store变量.
我想watch在我的功能中添加功能vue component
这是我到目前为止:
import Vue from 'vue';
import {
MY_STATE,
} from './../../mutation-types';
export default {
[MY_STATE](state, token) {
state.my_state = token;
},
};
我想知道是否有任何变化 my_state
我如何store.my_state在我的vuejs组件中观看？
比方说,例如,你有一篮水果,每次你从篮子里添加或删除水果,你想(1)显示有关水果数量的信息,但你也(2)想要得到通知一些花哨时尚的水果数......
水果计数component.vue
Fruits: {{ count }}
请注意,watch对象中函数的名称必须与对象中函数的名称匹配computed.在上面的例子中,名称是count.
监视属性的新旧值将作为参数传递给监视回调(计数函数).
篮子商店看起来像这样:
水果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
}
}
// Obvously you would need some mutations and actions,
// but to make example cleaner I'll skip this part.
})
export default basket
您可以在以下资源中阅读更多内容:
计算属性和观察者
API文档:计算
API文档:观看
您不应该使用组件的观察者来听取状态变化.我建议您使用getter函数,然后将它们映射到组件中.
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters({
myState: 'getMyState'
})
}
}
在你的商店:
const getters = {
getMyState: state => state.my_state
}
您应该能够通过this.myState在组件中使用来收听对商店所做的任何更改.
https://vuex.vuejs.org/en/getters.html#the-mapgetters-helper
如上所述,直接在商店中观看更改并不是一个好主意
但在一些非常罕见的情况下,它可能对某人有用,所以我会留下这个答案.对于其他情况,请参阅@ gabriel-robert回答
你可以通过这样做state.$watch.created在组件中的(或者您需要执行此操作的方法)方法中添加此方法
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.
}
);
更多细节:https://vuex.vuejs.org/en/api.html#vuex-store-instance-methods
我认为提问者想要使用Vuex手表.
this.$store.watch(
(state)=>{
return this.$store.getters.your_getter
},
(val)=>{
//something changed do something
},
{
deep:true
}
);
这适用于所有无法用吸气剂解决问题并真正需要观察者的人,例如与非第三方的东西交谈(请参阅Vue Watchers何时使用观察者).
Vue组件的观察者和计算值都适用于计算值.所以与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);
}
}
}
如果它只是关于组合本地和全局状态,mapState的doc也提供了一个例子:
computed: {
...mapState({
// to access local state with `this`, a normal function must be used
countPlusLocalState (state) {
return state.count + this.localCount
}
}
})
就像这样简单：
watch: {
'$store.state.drawer': function() {
console.log(this.$store.state.drawer)
}
}
通过观察和设置值更改来创建商店变量的Local状态。这样，表单输入v模型的局部变量更改不会直接更改存储变量。
data() {
return {
localState: null
};
},
computed: {
...mapGetters({
computedGlobalStateVariable: 'state/globalStateVariable'
})
},
watch: {
computedGlobalStateVariable: 'setLocalState'
},
methods: {
setLocalState(value) {
this.localState = Object.assign({}, value);
}
}
京公网安备 11010802040832号 | 京ICP备19059560号-6 