uniapp使用 mapState,mapMutations获取store中的数据
时间: 2024-05-10 21:03:15 浏览: 79
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
在uniapp中,你可以通过使用 `mapState` 和 `mapMutations` 辅助函数来获取 Vuex store 中的状态和 mutations。
首先,在你的组件中引入 Vuex store:
```javascript
import { mapState, mapMutations } from 'vuex';
export default {
computed: {
...mapState({
count: state => state.count
})
},
methods: {
...mapMutations({
increment: 'increment'
})
}
}
```
在上面的例子中,`mapState` 函数将 `state.count` 映射为 `this.count`,而 `mapMutations` 函数将 `increment` 映射为 `this.increment` 方法。
然后,在你的模板中使用它们:
```html
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
```
这样,当你点击按钮时,`increment` 方法将会触发 `state` 中的 `increment` mutation。
注意,这里的 `state` 和 `mutations` 是你在 Vuex store 中定义的。如果你的 Vuex store 中有多个模块,你需要使用 `namespaced` 属性来指定模块的名称。
更多信息请参考[官方文档](https://vuex.vuejs.org/zh/guide/state.html#%E8%AE%A9%E7%BB%84%E4%BB%B6%E8%8E%B7%E5%8F%96-state)。
阅读全文