vuex 存储Map对象
时间: 2024-10-16 07:08:57 浏览: 17
vuex-stores::file_cabinet:为Vuex存储对象,Vuex是一种用于状态管理的简单且流畅的API
Vuex是一个专为Vue.js应用程序设计的状态管理模式,它提供了一种集中存储应用状态并协调各组件之间的状态变化的方式。对于存储Map对象,Vuex允许你在store中创建一个mapState、mapGetters、mapActions或mapMutations的对象,这些对象可以用来获取、修改、触发动作等。
例如,你可以这样做:
```javascript
// 定义store中的mapState映射
const state = {
myMap: new Map([
['key1', 'value1'],
['key2', 'value2']
])
}
// 使用mapState获取这个Map对象
export const getters = {
getMyMap: (state) => state.myMap
}
// 然后在组件中通过计算属性或直接访问getter获取Map内容
computed: {
mapValues() {
return this.getMyMap().values()
}
}
```
当需要更新Map对象时,你应该避免直接在store中操作,因为这是不可变的,而是通过commit mutations来进行:
```javascript
export const mutations = {
updateMyMap(state, payload) {
state.myMap = new Map(payload)
}
}
```
然后在actions里调用mutation:
```javascript
export const actions = {
updateMyMap({ commit }, payload) {
commit('updateMyMap', payload)
}
}
```
阅读全文