如果这是我的店.js文件:
const state = {
count: 0,
loggedIn: false
}
const mutations = {
UP_COUNT(state) {
state++;
}
}
const actions = {
upCount({ commit }) {
commit('UP_COUNT');
}
}
this.$store.dispatch('upCount');
然后，假设在另一个Vue组件中，我想使用状态计数:
<div class="count">{{ this.$store.state.count }}</div>
正如我在this post篇文章中指出的，做事没有硬性和快速性的方法，但遵循一种实践并遵循它是最好的.
使用getter似乎有些过分，但只要getter名称保持不变，就可以在后台使用getter更改数据，这节省了大量工作，可以重新分解并try 查找可能使用this.$store.state.module.someValue的其他地方的所有引用.
它还允许您将基于多个状态变量的数据返回到一个getter中，即
`isAllowed: 'getIsAllowed'`
可能是基于
getIsAllowed (state) {
return state.loggedIn && state.hasPermission && state.somethingElse
}
您可以在一个地方轻松更改isAllowed的基础，而不是在组件中使用每个状态变量并多次执行逻辑.