Store-状态管理
目录结构
.
├── src 源码目录
│ ├── store 状态管理配置
│ │ ├── module 模块状态管理，登录、产品等分别模块；
│ │ │ ├── authority
├── index.js authority模块的存储，不拆分文件的存储方式
│ │ │ ├── xxx 存储xxx模块state（命名和view下的模块文件夹保持一致）
├── actions.js 处理数据动作，处理需要存储的数据后再进行派发mutations， action 重点在内部执行异步操作
├── getters.js 获取过滤数据，获取数据
├── index.js 配置xxx模块入口文件
├── mutation-types.js配置Store中所有状态的mutations
├── mutation.js 更改store中的状态的唯一方法是提交mutation；通过派发，commit改变store存储的数据
├── state.js 初始的store数据
│ │ ├── index.js 生成vux Store对象配置，聚合modules中各模块的状态
.
如何新增store？
例：新增一个department的模块的currentDepartment状态管理
第一步：新增一个名字为department的store模块
复制store -> modules -> meetingLayout，重命名为department
第二步： mutations.js，中新增代码
复制store -> modules -> department -> mutations.js，中新增代码：
import * as types from '../mutation-types'
const department = {
state: {
currentDepartment: null
},
mutations: {
[types.SET_CURRENT_DEPARTMENT] (state, department) {
state.currentDepartment = department
},
}
}
export default department
第三步：暴露SET_CURRENT_DEPARTMENT方法
在store-> modules -> department -> mutation-types.js，配置上一步定义的SET_CURRENT_DEPARTMENT方法
export const SET_USER_INFO = 'SET_USER_INFO'
export const SET_CURRENT_DEPARTMENT = 'SET_CURRENT_DEPARTMENT'
第四步：将department模块聚合到store中
修改store->index.js文件
导入department模块
import app from './modules/app'
import department from './module/department'
将department加入到store的modules中
modules: {
app,
department
}
如何使用store中新增的currentDepartment
获取、修改currentDepartment
在vue文件中导入mapState，mapMutations
import { mapState, mapMutations } from 'vuex'
获取
在vue的computed中，聚合需要引入的模块
computed: {
...mapState(['department']),
//or
...mapState('department', {
currentDepartment: state => state.currentDepartment
}),
},
综上，就可以在vue中通过this.department.currentDepartment使用currentDepartment这个状态了
在template中使用
department.currentDepartment
在vue script中
this.department.currentDepartment
修改
在vue的methods中，引入SET_CURRENT_DEPARTMENT方法
methods: {
...mapMutations(['SET_CURRENT_DEPARTMENT']),
...mapMutations([
'increment', // script中通过 `this.increment()` 映射为 `this.$store.commit('increment')`
// `mapMutations` 也支持载荷：
'incrementBy' // script中通过 `this.incrementBy(amount)` 映射为`this.$store.commit('incrementBy', amount)`
]),
}
在vue的script中，修改current_department
this.SET_CURRENT_DEPARTMENT(department); // 映射为 `this.$store.commit('SET_CURRENT_DEPARTMENT', department)`
使用Actions
import { mapActions } from 'vuex'
methods: {
...mapActions([
'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
// `mapActions` 也支持载荷：
'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
]),
...mapActions({
add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
})
}
