我同时使用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组件?
当前回答
你也可以使用debouncedWatch (vue使用函数)安全地观看它
debouncedWatch(
lines,
() => {
console.log('changed');
},
500,
);
其他回答
通过观察和设置值变化来创建存储变量的Local状态。 这样，表单输入v-model的局部变量更改不会直接改变存储变量。
data() {
return {
localState: null
};
},
computed: {
...mapGetters({
computedGlobalStateVariable: 'state/globalStateVariable'
})
},
watch: {
computedGlobalStateVariable: 'setLocalState'
},
methods: {
setLocalState(value) {
this.localState = Object.assign({}, value);
}
}
如上所述，直接在商店中观察变化并不是一个好主意
但在一些非常罕见的情况下，它可能对某人有用，所以我将留下这个答案。其他情况请参见@gabriel-robert answer
你可以通过州政府，$watch。将此添加到组件中创建的(或需要执行此方法的地方)方法中
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/api/#watch
你也可以订阅商店突变:
store.subscribe((mutation, state) => {
console.log(mutation.type)
console.log(mutation.payload)
})
https://vuex.vuejs.org/api/#subscribe
我用了这种方法，它很有效:
store.js:
const state = {
createSuccess: false
};
mutations.js
[mutations.CREATE_SUCCESS](state, payload) {
state.createSuccess = payload;
}
actions.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
}
在你使用state from store的组件中:
watch: {
isSuccess(value) {
if (value) {
this.$notify({
title: "Success",
message: "Create user success",
type: "success"
});
}
}
}
当用户提交表单时，action STORE将被调用，创建成功后，CREATE_SUCCESS突变将被提交。Turn createsuccsuccess为true，在组件中，监控器将看到值已更改并触发通知。
isSuccess应该匹配你在geters .js中声明的名称
在computed中使用你的getter，然后观察它并做你需要做的事情
computed:{
...mapGetters(["yourGetterName"])
},
watch: {
yourGetterName(value) {
// Do something you need
},
}
