Vuex

一.什么是Vuex

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

Vuex主要解决大中型复杂项目的数据共享问题。

二.Vuex的核心

state：所有的数据都存储在state中 state是一个对象

mutations：可以直接操作state中的数据

actions：只能调用mutations的方法

getters：类似计算属性实现对state中的数据做一些逻辑性的操作

modules：将仓库分模块存储

plugins : 插件

主要流程：

组件通过 dispatch 到 actions；actions 是异步操作，再 actions 中通过 commit 提交到 mutations；mutations 再通过逻辑操作改变 state ，从⽽同步到组件，更新其数据状态。

三.Vuex使用

        （1）把数据存储到Vuex中

           this.$store.commit("方法名",参数)  参数只能传一个 ，如果有多个参数，可以传一个对象

           this.$store.dispatch("方法名",参数)

        （2）{{$store.state.value}}   在组件中显示 Vuex 中的数据

            2.映射

                将vuex的中的成员映射到组件中然后使用

                mapState  mapMutations  mapGetters  mapActions

                步骤：

                        （1）在组件中导入需要的函数

               import {mapState,mapGetters **} from "vuex"

                        （2）映射函数在组件中对应位置

                                mapState --computed

                                mapGetters --computed

                                mapMutations--methods

                                mapActions--methods

                        语法：

                                computed:{ ...mapState(['student']) }

四.Vuex持久化

        1.本地存储

            localStorage.setItem("token",JSON.stringify(res.data)) 存储

            JSON.parse(localStorage.getItem('token')) || [ ] 来获取本地存储

        2.第三方插件

                (1) 安装插件    npm install vuex-persistedstate --save

              （2）在store文件中的index.js中引入 vuex-persistedstate 并配置     

import createPersistedState from "vuex-persistedstate"
const store =newVuex.Store({
 state: {},
 mutations: {},
 actions: {},
 plugins: [createPersistedState()]
})