1.序言
官方网站门牌号：
https://vuex.vuejs.org/zh/官方网站如是说：Vuex 是两个专为 Vue.js 应用领域软件开发的状况区域化 + 库。它选用封闭式repeats应用领域的大部份模块的状况，并以相应的准则确保状况以一类可预估的形式发生改变。
促进作用： 将整座控制系统中大部份的状况（须要跨网页 跨模块fork的表达式）都储存到vuex库房中，同时实现任一模块都能对该统计数据展开读取操作形式。
2.vue 模块fork简述
父陈谟 静态特性+props子传父 $emit+自订该事件华北局该事件汇流排 Vue.prototype.$bus=new Vue() +$emit+$on先王侄子fork: provide+ inject2.1 父陈谟 静态特性+props
父模块
<子模块名 title=“晚安啊” :age=“20”></子模块名>子模块
透过props 转交后， 间接用 this.表达式采用
props:{ title:{ type:String, default:副标题 }, age:{ type:Number, default:0 }, }2.2 子传父 $emit+自订该事件
父模块
<子模块名@自订该事件类型名=“继续执行表达式”></子模块名>methods:{ 继续执行表达式(data){ //data 是 子模块传达给父模块的统计数据 } }子模块
this.$emit(自订该事件类别名,传达的统计数据)2.3 华北局该事件汇流排 $bus eventBus
在同两个网页模块中 的大部份子模块能任一传达统计数据
main.js 全局挂载 两个新的vue实例对象作为 华北局
Vue.prototype.$bus = new Vue()发送统计数据的模块
//发送统计数据 this.$bus.$emit(自订该事件类别,发送的统计数据)转交统计数据的模块
转交统计数据的模块能在created 生命周期中 监听该自订该事件，如果被触发就能拿到统计数据
this.$bus.$on(自订该事件类别,(data)=>{ //data 是 拿到的统计数据 })2.4 先王侄子fork: provide+ inject
优：先王节点定义好统计数据，大部份的侄子模块 都能采用该统计数据 非常方便
缺：只能传达两个 固定值下去，没有响应式（子模块修改了该统计数据，先王节点的统计数据并不会发生改变）
先王模块
// 先王注入依赖 provide: { name: 晚安呀, }, // 先王注入依赖 provide() { return { name: “晚安呀”, }; },侄子模块
export default { inject:[name], mounted(){ console.log(this.name); //不能修改—报错 this.name = 我是侄子模块 } }2.5 中间商：父亲模块带静态特性 $attrs $listeners
透过特性fork：能快速同时实现 先王==>侄子 侄子==>先王【父亲模块只是两个中间商 负责 转发统计数据和转发该事件】
爷爷模块
<template> <div> 我是爷爷模块 <button @click=“title=我是爷爷模块的新统计数据”>点击修改统计数据</button> <hr /> <father :title=“title” @change=“getData”></father> </div> </template> <script> import Father from ./components/AppFather.vue export default { data() { return { title: “我是爷爷模块的统计数据”, }; }, methods:{ getData(data){ console.log(data); } },components: { Father, }, }; </script>父亲模块
统计数据 传达给 下一级
<template> <div> 父亲模块： <hr> <grand-son v-bind=“$attrs” v-on=“$listeners” ></grand-son> </div> </template> <script> import GrandSon from ./GrandSon.vue export default { components:{ GrandSon } } </script>侄子模块
<template> <div> 我是侄子模块: <p>{{ title }}</p> <button @click=“changeData”>回传统计数据给先王</button> </div> </template> <script> export default { props: { // 在爷爷模块中传达过来的特性 title: { type:String, default:副标题 }, }, methods:{ changeData(){ let data ={msg:“我是侄子模块回传的统计数据”} this.$emit(change,data) } },3.Vuex 状况管理工作库房
安装vuexyarn add vuex@3.6.2 //或 npm i vuex@3.6.2 创建vuex 的库房文件 src/store/index.jsimport Vue from vue import Vuex from vuex //注册插件 Vue.use(Vuex); //根据vuex的store 生成实例对象 const store = new Vuex.Store({ //存统计数据的库房 state:{ name:comentang }, //修改库房中统计数据的同步方法 mutations:{ },//调用 同步方法 同时实现异步修改库房中的统计数据 actions:{ } }) //暴露生成的vuex实例 export default store;main.js 展开导入和挂载import store from ./store new Vue({ router, store, //将store 实例挂载到vue顶级实例对象上 render: h =>h(App) }).$mount(#app)state:{ name:“cometnag” }间接透过实例对象层级查找this.name = this.$store.state.name //cometang优点：如果库房中的统计数据发生了变化，computed 会自动触发，重新更新值
computed:{ nameData(){return this将mapState 对象解构出来间接放到 computed中
优点：采用简便，推荐此方法
import {mapState} from vuex computed:{ …mapState([name]) }5.mutations 修改统计数据的方法
5.1 在模块中间接修改值
直接透过实例对象层级赋值
缺点：任何模块任何时候都能修改这个统计数据，给统计数据维护带来了不稳定性。
vuex官方网站页非常明确的指出，修改vuex库房中的统计数据必须采用 vuex中定义的方法。
低版本的vuex 统计数据会修改成功 但是控制台会有报错提示。
this.$store.state.name = 新统计数据5.2 定义mutations的方法 用来修改统计数据
const store = new Vuex.Store({ //存数据的库房 state:{ name:comentang }, //修改库房中统计数据的同步方法mutations:{ changeName(state,newData){ state.name = newData } }, })在模块中 调用该方法 同时实现修改统计数据this.$store.commit(changeName,新统计数据)methods+解构的形式 【推荐】import { mapMutations } from vuex; methods:{ // 注意，mapMutations是解构到methods里面的，而不是计算特性了…mapMutations([changeName]), //采用方法和methods中的表达式 一致。 // this.changeName(新统计数据) 修改统计数据 }6. actions 异步修改统计数据
定义actions 异步操作形式中 透过上下文 调用同步方法 修改统计数据
//调用 同步方法 同时实现异步修改库房中的统计数据 actions:{ //1s之后 透过上下文 调用同步方法修改统计数据setAsyncData(context,newData){return new Promise(resolve=>{ setTimeout(()=>{ context.commit(changeName,newData); resolve(); },1000) }) } }在模块中 调用该方法 同时实现修改统计数据 let res = await this.$store.dispatch(setAsyncData,this.title)methods+解构的形式 【推荐】import { mapActions } from vuex; methods:{ // 注意，mapActions是解构到methods里面的，而不是计算特性了 …mapActions([setAsyncData]), let res= await this.setAsyncData(this.title) }7.修饰器：Getters
特点：必须要有return 返回新统计数据 ，调用时不须要传参数
定义修饰器
getters:{ updateName(state){ return 晚安呀this.$store.getters.updateName透过computed 解构表达式采用import{mapGetters} fromvuex computed:{ …mapGetters([updateName]) }, created() { //取值 this.updateName1 =this.updateName }8. 模块 Module
假设两个项目功能比较复杂，在vuex中储存的统计数据非常多，设置出现了同名的情况，这种时候就不能间接写到两个store 文件中了，应该根据不同的功能模块 对 该store文件展开拆分。
思路：写独立的js文件 将 5个核心配置写入两个对象 并 暴露出去，导入到总的store里面的modules里面
现有模块： 用户模块users 商品模块 goods
src/store/index.js #总的vuex主模块 src/store/users.js #用户模块 src/store/goods.js #商品模块//index.js import Vue from vue import Vuex from vuex // 导入子模块 import users from ./users import goods from ./goods //注册插件 Vue.use(Vuex); //根据vue的store 生成实例对象 const store = new Vuex.Store({ state: { name: 我是主模块的cometang }, mutations: { }, actions: { },getters: { }, //模块 modules: { users, goods } }) //暴露生成的vuex实例 export defaultstore;// goods const goods = { namespaced: true, state:{ goodsName:我是goods的name }, mutations:{ }, actions:{ }, getters:{ } } export default goods//users const users = { namespaced: true, state: { userName: 我是userjs的name }, mutations:{ }, actions: { }, getters: { } } export default users注意：采用了模块化和命名空间之后对于子模块中的统计数据，方法的调用 不再建议采用 解构赋值快速复制的形式展开.
原因：本来命名空间打开是为了区分各个不同的模块，如果用解构的形式，可能会造成统计数据表达式名 方法名重名采用的风险。
采用形式 this.$store.state.users.userName; Getters 修饰器的统计数据 this.$store.getters.users.userName; //调用同步方法 this.$store.commit(模块名/mutations的方法名,传达的统计数据)// 调用异步方法 this.$store.dispatch(模块名/actions的方法名,传达的统计数据)解构采用特点：两个模块中 只能解构两个模块的统计数据 和方法
import{ mapState,mapMutations,mapActions,mapGetters }from vuex; computed:{ …mapState(users,[userName]), //this.userName …mapGetters(users,[newUserName]) //this.newUserName }, methods:{ …mapMutations(users,[updateName]), //this.updateName(统计数据) …mapActions(users,[asyncUpdateName])//this.asyncUpdateName(统计数据) },9.Vuex 统计数据持久化 插件
控制系统中经常须要将很多统计数据 储存起来 以后仍然能采用（关闭浏览器之后 重新打开仍然可用）
思路一： 在大部份的state 中 增加循环，把统计数据全部储存到本地储存localStorage之中。
思路二：采用统计数据持久化的插件
npm install vuex-persistedstate 或 yarn add vuex-persistedstate//统计数据持久化插件导入 import persistedState from vuex-persistedstate //根据vue的store 生成实例对象 const store = newVuex.Store({state: { }, mutations: { }, actions: { }, getters: { }, //模块 modules: { }, plugins: [persistedState()] //添加插件 }) //暴露生成的vuex实例 export default store;
