vuex中state值更新后,getters没有更新
时间: 2023-06-19 08:04:27 浏览: 97
在Vuex中,如果你的state已经被更新了,但是你的getter没有被更新,这可能是因为getter依赖的state值没有改变,Vuex不会重新计算getter的值。
你可以尝试在getter中添加一个参数,这个参数是getter的状态,可以手动判断getter的状态是否改变了,如果没有改变,就不需要重新计算getter的值。
例如:
```javascript
// 假设state中有一个属性叫做count,getter依赖于count
const getters = {
// 传入state参数,手动判断count是否改变
getCount: (state) => (count) => {
if (count === state.count) {
console.log('getter没有更新');
} else {
console.log('getter已经更新');
}
return state.count;
}
};
```
在上面的代码中,我们传入了一个count参数,手动判断count是否改变,如果没有改变,就不需要重新计算getter的值。
相关问题
如何获取vuex中state的值
您可以使用Vuex中的getters来获取state的值,例如:
```
// 在store中定义state
const state = {
count: 0
}
// 在store中定义getters
const getters = {
getCount: state => state.count
}
// 获取count的值
store.getters.getCount
```
vuex中怎么用getters
在Vuex中,getters用于从state中派生出一些新的状态。可以将它们视为store的计算属性。使用getters可以避免在模板中编写重复或冗余的计算逻辑,同时也可以更好地组织和管理状态和逻辑。
要使用getters,需要在store中定义一个getters对象。该对象包含一些函数,这些函数接收store的state作为其第一个参数,并返回基于该state的派生状态。例如:
```
const store = new Vuex.Store({
state: {
todos: [
{ id: 1, text: 'Learn Vue', done: true },
{ id: 2, text: 'Build an app', done: false },
{ id: 3, text: 'Deploy to production', done: false }
]
},
getters: {
doneTodos: state => {
return state.todos.filter(todo => todo.done)
}
}
})
```
在这个例子中,我们定义了一个名为"doneTodos"的getter函数。它基于state中的"todos"数组,返回一个新的数组,其中只包含已完成的todo项。
在组件中,可以通过使用"mapGetters"辅助函数将getter映射到组件的计算属性中。例如:
```
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters([
'doneTodos'
])
}
}
```
这样,我们就可以在组件中使用"doneTodos"计算属性,来获取已完成的todo项列表。
总结一下,使用getters可以使我们更好地组织和管理Vuex中的状态和逻辑,同时可以提高代码的复用性和可维护性。
阅读全文