1.前言

官网地址：

官网介绍：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

作用： 将整个系统中所有的状态（需要跨页面 跨组件传值的变量）都存储到vuex仓库中，实现任意组件都可以对该数据进行存取操作。

2.vue 组件传值回顾父传子 动态属性+props子传父 $emit+自定义事件中央事件总线 Vue.prototype.$bus=new Vue() +$emit+$on祖宗孙子传值: 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 祖宗孙子传值: provide+ inject

优：祖宗节点定义好数据，所有的孙子组件 都可以使用该数据 非常方便

缺：只能传递一个 固定值下去，没有响应式（子组件修改了该数据，祖宗节点的数据并不会发生变化）

祖宗组件

  //   祖宗注入依赖  provide: {    name: '你好呀',  },

 //   祖宗注入依赖  provide() {    return {      name: "你好呀",    };  },

孙子组件

   export default {        inject:['name'],        mounted(){            //可以获取和使用            console.log(this.name);            //不能修改---报错            this.name = '我是孙子组件'        }    }

2.5 中间商：父亲组件带动态属性 $attrs $listeners

通过属性传值：可以快速实现 祖宗==>孙子 孙子==>祖宗【父亲组件只是一个中间商 负责 转发数据和转发事件】

爷爷组件

<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>

父亲组件

父亲组件 通过$attrs 将获取到的上一层的数据 传递给 下一级

父亲组件 通过 $listeners 将获取到的自定义事件 传递给上一级 触发

<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 状态管理仓库安装vuex

yarn add vuex@3.6.2   //或npm i vuex@3.6.2    

创建vuex 的仓库文件 src/store/index.js

import 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')

4 获取 state 中的数据

state:{ 	name:"cometnag"      }

直接通过实例对象层级查找

缺点：每次改变都需要使用该语句进行重新获取，代码太冗长

this.name = this.$store.state.name     //cometang

通过 计算属性 获取值

优点：如果仓库中的数据发生了变化，computed 会自动触发，重新更新值

computed:{    nameData(){        return this.$store.state.name;    }}

通过计算属性 + 对象解构获取

将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 '你好呀'+state.name;            }    }

组件中直接使用 获取数据

 this.$store.getters.updateName

通过computed 解构函数使用

import {mapGetters} from 'vuex' 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.jsimport 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 default store;

// goodsconst goods = {    namespaced: true,    state:{        goodsName:'我是goods的name'    },    mutations:{    },    actions:{    },    getters:{    }}export default goods

//usersconst 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 = new Vuex.Store({    state: {    },    mutations: {    },    actions: {    },    getters: {    },    //模块    modules: {    },    plugins: [persistedState()] //添加插件    })//暴露生成的vuex实例export default store;