#javascript #vue.js #vuex
#javascript #vue.js #vuex
Вопрос:
Я новичок в Vuejs, и я немного застрял с функцией просмотра в Vuex store. Вот мой код для хранилища:
const storeconf: StoreOptions<any> = {
state: {
string: 'teststring'
},
actions:{
changeString({commit}):any{
commit('stringChange');
}
},
mutations:{
stringChange(state){
state.string=Math.random() ' root';
}
},
modules: {
mod:{
namespaced:true,
state:{
string:'modulestring'
},
actions:{
changeString({commit}):any{
commit('stringChange');
}
},
mutations:{
stringChange(state){
state.string=Math.random() ' module';
}
},
}
}
..и приложение:
new Vue({
el: '#app',
store: store,
template:'<button @click="doActions">click</button>',
mounted(){
this.$store.watch(
state =>[state.string, state.mod.string],
watched => console.log(watched[0] ' -- ' watched[1]);
);
},
methods:{
doActions:function(){
this.$store.dispatch('mod/changeString')
this.$store.dispatch('changeString');
}
}
Дело в том, что когда я запускаю действие в корневом хранилище, наблюдатель работает отлично, но когда я запускаю модуль one с пространством имен (mod / changeString ), наблюдатель вообще ничего не делает.
Что для меня странно, так это то, что действие с пространством имен должным образом изменяет значение хранилища, оно просто не запускает наблюдателя..
Что я делаю не так?
Комментарии:
1. Я думаю, вам не нужно следить за состоянием. Просто используйте вычисляемые свойства, помещая доступ к состоянию внутри вычисляемого перехвата
2. Я вижу, что изменения в
state.string
илиstate.mod.string
запускают программу наблюдения, как и ожидалось: jsfiddle.net/vo68hpum
Ответ №1:
спасибо, это действительно так. Реальный проект, из которого я извлек этот пример, написан на typescript, следуя этому руководству, и, похоже, проблема в том, что свойство module было установлено как необязательное и не инициализировано. Он по-прежнему регистрировал мутацию и изменял состояние, но не запускал никакого наблюдения. Довольно странно.