在uniapp中,班级页面选中的班级数据存在store里,给个例子
时间: 2024-03-06 09:48:44 浏览: 55
解决vue刷新页面以后丢失store的数据问题
5星 · 资源好评率100%
好的,假设你的班级数据是一个数组,存储在Vuex的store中,可以参考下面的代码示例:
```javascript
// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
selectedClass: null, // 选中的班级数据
classList: [ // 班级数据数组
{ id: 1, name: 'Class A' },
{ id: 2, name: 'Class B' },
{ id: 3, name: 'Class C' },
]
},
mutations: {
setSelectedClass(state, classData) {
state.selectedClass = classData
}
},
actions: {
selectClass({ commit }, classData) {
commit('setSelectedClass', classData)
}
},
getters: {
getClassList(state) {
return state.classList
},
getSelectedClass(state) {
return state.selectedClass
}
}
})
```
在页面中,你可以通过 `mapActions`、`mapGetters` 辅助函数来访问 `store` 中的数据,例如:
```vue
<template>
<div>
<h2>班级列表</h2>
<ul>
<li v-for="classItem in classList" :key="classItem.id">
<span>{{ classItem.name }}</span>
<button @click="selectClass(classItem)">选择</button>
</li>
</ul>
<h2>选中的班级</h2>
<div v-if="selectedClass">
<span>{{ selectedClass.name }}</span>
</div>
</div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex'
export default {
computed: {
...mapGetters(['getClassList', 'getSelectedClass']),
classList() {
return this.getClassList
},
selectedClass() {
return this.getSelectedClass
}
},
methods: {
...mapActions(['selectClass']),
}
}
</script>
```
在模板中,通过 `mapGetters` 辅助函数获取 `classList` 和 `selectedClass` 数据,通过 `mapActions` 辅助函数触发 `selectClass` action 来更新 `selectedClass` 数据。
阅读全文