vuex中的getter可以认为是 store 的计算属性
时间: 2024-03-16 15:45:11 浏览: 17
你说得对,Vuex中的getter可以认为是store的计算属性。在Vuex中,getter用于对store中的state进行加工处理,并返回一个新的值,类似于组件中的计算属性。与计算属性类似,getter中的代码只有在它所依赖的state发生改变时才会重新计算。因此,getter不仅可以用于获取state中的数据,还可以用于计算派生状态。
下面是一个getter的示例代码:
```javascript
const store = new Vuex.Store({
state: {
todos: [
{ id: 1, text: 'todo 1', done: true },
{ id: 2, text: 'todo 2', done: false },
{ id: 3, text: 'todo 3', done: true }
]
},
getters: {
doneTodos: state => {
return state.todos.filter(todo => todo.done)
},
doneTodosCount: (state, getters) => {
return getters.doneTodos.length
}
}
})
```
在上面的代码中,我们定义了两个getter,一个是doneTodos,它返回所有已完成的todo项,另一个是doneTodosCount,它返回已完成的todo项的数量。在doneTodosCount中,我们使用了第二个参数getters来获取doneTodos getter的返回值,这样可以方便地计算已完成的todo项的数量。
在组件中,我们可以通过`this.$store.getters.doneTodos`来获取所有已完成的todo项,而通过`this.$store.getters.doneTodosCount`来获取已完成的todo项的数量。由于getter是响应式的,当state中的数据发生改变时,getter的返回值也会相应地发生改变,从而保证了组件的数据与state中的数据保持同步。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)