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')`})
}

vue请求封装，Store-状态管理部分（文档笔记）相关推荐

uni-app store 状态管理学习，多写几遍就会了
uni-app使用了一段时间了,一直没有用到store 状态管理,还是应该学习一下,以后会用到的 1.使用hbuiderx创建uni-app项目 2.与static同级创建store文件夹,store ...
智能媒体管理产品文档转换/预览功能介绍(1)---Cloud Native架构
一.导语办公文档是每个人日常频繁使用的工具,ppt.word.xls.wps.pdf等为我们工作和生活带来了很多的便利,本文介绍在云计算和智能手机时代,基于智能媒体管理的新型Cloud Nati ...
Tips--git bash管理本地文档的常用命令
git bash在管理本地文档中的常用命令 1. 序 2. 初始化本地仓库 3. 创建master主干支 4. 创建分支 5. 切换分支 6. 提交分支修改 7. 合并分支 8. GitLab 配置过 ...
java计算机毕业设计vue图书档案管理系统MyBatis+系统+LW文档+源码+调试部署
java计算机毕业设计vue图书档案管理系统MyBatis+系统+LW文档+源码+调试部署 java计算机毕业设计vue图书档案管理系统MyBatis+系统+LW文档+源码+调试部署本源码技术栈: ...
实验2linux进程控制与通信,实验2 进程控制与通信管理word文档良心出品
<实验2 进程控制与通信管理word文档良心出品>由会员分享,可在线阅读,更多相关<实验2 进程控制与通信管理word文档良心出品(13页珍藏版)>请在人人文库网上搜索. 1. ...
java计算机毕业设计vue健身食谱系统MyBatis+系统+LW文档+源码+调试部署
java计算机毕业设计vue健身食谱系统MyBatis+系统+LW文档+源码+调试部署 java计算机毕业设计vue健身食谱系统MyBatis+系统+LW文档+源码+调试部署本源码技术栈: 项目架构 ...
工程监测管理平台、工程数据看板、工程总览、动态模型、数据分析、数据跟踪、建筑工地、数据报表、警点管控、现场记录、观测记录、测点管理、模型管理、文档管理、墙体下沉、成员管理、axure原型、产品原型
工程监测管理平台.工程数据看板.工程总览.动态模型.数据分析.数据跟踪.建筑工地.数据报表.警点管控.现场记录.观测记录.测点管理.模型管理.文档管理.墙体下沉.成员管理.axure原型.产品原型 ...
Word控件Spire.Doc 【段落处理】教程(十二)：如何在 C# 中管理 word 文档的分页
当我们要管理段落的分页时,我们可以直接插入分页符.但是后来我们可能会发现很难在分页符上方添加或删除文本,然后我们必须删除整个分页符.使用 Microsoft word,我们还可以使用段落对话框来管理 ...
Vue官网2文档笔记
文章目录 $event $on Class 与 Style 绑定对象语法列表渲染 v-for 中使用对象事件处理事件修饰符插槽具名插槽解构插槽 prop 动态组件&异步组件访问 ...

vue请求封装，Store-状态管理部分（文档笔记）