vuex里面getter如何使用?
时间: 2023-09-07 10:11:46 浏览: 139
在 Vuex 中,`getter` 用于对 `state` 进行计算或筛选,以获取派生的数据。你可以按照以下步骤来使用 `getter`:
1. 在 Vuex 的 `store` 中定义 `getters` 方法。每个 `getter` 方法都接收两个参数:`state` 和其他 `getters` 方法。你可以在 `getters` 中定义一些逻辑,例如计算、筛选或组合 `state` 数据。例如,定义一个名为 `doubleCount` 的 `getter` 方法来获取 `state` 中计数器 `count` 的两倍:
```javascript
// ...
getters: {
doubleCount: state => state.count * 2
}
```
2. 在组件中使用 `this.$store.getters` 来访问 `getter` 方法。你可以通过计算属性或直接调用 `this.$store.getters` 来获取相关的派生数据。例如,在组件中获取 `doubleCount` 的值:
```javascript
computed: {
doubleCount() {
return this.$store.getters.doubleCount;
}
}
```
3. 当你需要在组件中使用 `getter` 时,直接访问对应的计算属性即可。在上述示例中,你可以通过 `this.doubleCount` 来获取计算后的值。
需要注意的是,`getter` 是基于其依赖的 `state` 数据进行缓存的,只有当其依赖的数据发生变化时,才会重新计算。这样可以避免不必要的重复计算。
希望这能回答你的问题。如果还有其他问题,请随时提问!
阅读全文