在Vuex中,getter是用来获取存储状态的。根据Vuex的设计原则,应该避免在getter之外的地方直接更改存储状态。如果需要更改存储状态,应该通过提交mutation来实现。
下面是一个示例,演示了如何在getter之外的地方更改Vuex存储状态的解决方法:
// store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++;
}
},
getters: {
getCount(state) {
return state.count;
}
}
});
export default store;
在上面的示例中,我们定义了一个名为count
的存储状态,并通过increment
mutation方法来更改这个状态。在getter中,我们定义了一个名为getCount
的getter方法,用于获取count
状态的值。
下面是一个组件的示例,演示了如何在组件中使用getter来获取存储状态,并通过提交mutation来更改存储状态:
// MyComponent.vue
Count: {{ count }}
在上面的示例中,我们通过mapGetters
来将getter映射为组件的计算属性。然后,在模板中,我们可以直接使用count
计算属性来获取存储状态。在incrementCount
方法中,我们通过mapMutations
将increment
mutation映射为组件的方法,并在点击事件中调用它来更改存储状态。
通过以上的解决方法,我们可以在getter之外的地方更改Vuex存储状态,但仍遵循Vuex的设计原则,保持状态的一致性和可追踪性。