vuex和vuex本地持久化

配置 vuex 和 vuex 本地持久化

目录

1. vuex是什么
2. vuex 的五个核心概念
   • State 定义状态(变量)
   • Getter 获取状态(变量的值)
   • Mutation 修改状态(修改变量的值)
   • Action 触发 mutation 函数,从而修改状态
   • Module 当状态很多时,把状态分开来管理
3. 通过vuex进行跨组件通信
4. vuex 本地持久化

(一) vuex是什么

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

1. 状态: 本质上就是一个变量,赋予不同的值就是不同的状态,管理状态实际上就是管理一堆变量
2. 响应式,vuex跟全局变量不同,修改了vuex的某个状态,依赖这个状态的视图都会发生改变

(二) vuex的5个核心概念

1. State 定义状态(变量), 辅助函数mapState

2. Getter 获取状态(变量的值),同时可以对状态进行处理, 辅助函数mapGetters
3. Mutation 修改状态(修改变量的值)
4. Action 触发 mutation 函数,从而修改状态,支持异步
5. Module 当状态很多时,把状态分开来管理

(三) 配置vuex

1. 安装vuex
   npm i vuex

2. vuex配置
   在根目录新建/store/index.js
   import Vue from 'vue'
   import Vuex from 'vuex'

   Vue.use(Vuex);
   
   const config = {
       // 定义状态
       state: {
           isLogin: false
       },
   
       // getters
       getters: {
           // isLogin:(state) =>{
           //     return state.isLogin;
           // },
           // 等同上面的写法
           isLogin: state => state.isLogin
       },
   
       // 修改state里面的变量
       mutations: {
           // state指向上面的state,payload是调用muation时传过来的参数
           updateLogin(state, payload) {
               state.isLogin = payload;
           }
       },
   
       // action行为
       actions: {
   
       },
   
       // module
       modules: {
   
       }
   }
   export default new Vuex.Store(config);
   

3. 在main.js导入并挂载到vue的实例上
   import Vue from 'vue'
   import App from './App.vue'
   import store from './store/index'

   Vue.config.productionTip = false
   
   new Vue({
     store,
     render: h => h(App),
   }).$mount('#app')
   

(四) 获取在vuex定义的状态

1. 通过this.store.state.isLogin);
   console.log(this.$store.state.firstName);
   }

   // 通常我们会定义计算属性来取值,比如
   computed: {
       // 自定义计算属性
       isLogin() {
         // 获取vuex的isLogin的值
         return this.$store.state.isLogin
       }
   }
   

2. 通过辅助函数mapState来获取
   data() {
   return {
   addr: '广西'
   };
   },

    computed: mapState({
       // 取state里count的值
       count: 'count',
    // 取state里count的值,用countAlias变量接收
       countAlias: 'count',
       // 为了能够使用 `this` 获取局部状态，必须使用常规函数
       fullName(state) {
         return this.addr + state.firstName + state.lastName;
       }
     })
     
    // 如果需要定义其它的计算属性,就按照下面的写法
    computed: {
        // 其他的计算属性
        total() {
            return 500
        },
        ...mapState({
              // 取state里count的值
               count: 'count',
               // 取state里count的值,用countAlias变量接收
               countAlias: 'count',
               // 为了能够使用 `this` 获取局部状态，必须使用常规函数
               fullName(state) {
                 return this.addr + state.firstName + state.lastName;
               }
         })
    }
   

3. 通过getters和mapGetters来取
   // 定义一个用来获取fullName的getter
   getters: {
   fullName(state) {
   return state.firstName + state.lastName;
   }
   },

   // 通过mapGetters
   import {mapGetters} from 'vuex';
   
   computed: {
        fullName() {
            return this.$store.getters.fullName;
        }
   }
   

(五) 修改state中的状态

1. 定义state和mutation
   import Vue from 'vue'
   import Vuex from 'vuex'
   Vue.use(Vuex)

   export default new Vuex.Store({
       state: {
           name: "没名字",
           count: 1
       },
       getters: {
   
       },
       // 修改state里的值必须通过mutation来修改
       mutations: {
           /**
            * 定义一个修改name的mutation
            * state是上面的定义的state
            * payload是新的数据
            */
           updateName(state, payload) {
               state.name = payload;
           }
       }
   })
   

2. 在需要的时候调用mutation进行修改state里的name状态
   // 第一个参数是mutation的名字,第二参数是要修改成的数据
   this.$store.commit('updateName','老胡');

(六) 综合例子: 通过vuex实现加减

1. 在vuex里配置state和mutation
   import Vue from 'vue'
   import Vuex from 'vuex'
   Vue.use(Vuex)

   export default new Vuex.Store({
       state: {
           count: 0
       },
   
       mutations: {
           addOne(state, payload) {
               state.count = state.count + 1;
           },
           minusOne(state, payload) {
               if (state.count > 0) {
                   state.count = state.count - 1;
               }
           }
       }
   })
   

2. index.vue的配置
   

(六) vuex 本地持久化

当刷新页面,项目重新加载,vuex 会重置,所有状态回到初始状态,使用 vuex-persistedstate 可以避免这种情况

1. 安装 vuex-persistedstate
   npm i vuex-persistedstate

2. 在vuex中,添加plugins
   import createPersistedState from 'vuex-persistedstate'

    plugins: [createPersistedState()],
   

   // 具体例子如下

   import Vue from 'vue';
   import Vuex from 'vuex';
   import createPersistedState from 'vuex-persistedstate'
   // 导入模块
   import login from './module/login'
   import my from './module/my'
   Vue.use(Vuex);
   export default new Vuex({
   plugins: [createPersistedState()],
   // 模块
   modules: {
   login,
   my
   },
   state: {
   isLogin: false,
   username: '',
   token: ''
   },
   getters: {
   isLogin: state => state.isLogin,
   token: state => state.token,
   username: state => state.username
   },
   mutations: {
   updateLogin(state, payload) {
   state.isLogin = payload;
   },
   updateToken(state, payload) {
   state.token = payload;
   },
   updateUsername(state, payload) {
   state.username = payload;
   }
   },
   actions: {
   LoginAction({commit}, payload) {
   commit('updateLogin',payload)
   },
   TokenAction({commit}, payload) {
   commit('updateToken',payload)
   },
   UsernameAction({commit}, payload) {
   commit('updateUsername',payload)
   },
   }
   })

(七) modules的使用

1. 配置模块的vuex
   export default {
   state: {
   cartNum: 10
   },

       getters: {
   
       },
   
       mutations: {
           updateCartNum(state, payload) {
               state.cartNum = payload;
           }
       },
   
       actions: {
   
       }
   }
   

2. 获取状态
   

3. 修改状态
   this.$store.commit("updateCartNum", 200);

(八) acion

Action 类似于 mutation，都是用来修改vuex的状态, 不同在于：

• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作。

1. 配置action
   import Vue from 'vue'
   import Vuex from 'vuex'
   Vue.use(Vuex)

   export default new Vuex.Store({
       state: {
           num: 10
       },
   
       mutations: {
           updateNum(state, payload) {
               state.num = payload;
           }
       },
   
       actions: {
           /**
            * 修改num的action
            * @param {*} ctx 可以拿到一个类似store的实例
            * @param {*} payload 修改的数据
            */
           updateNum(ctx, payload) {
               setTimeout(() => {
                   ctx.commit('updateNum', payload);
               }, 3000)
           }
       }
   })
   

2. 派发action,在需要的地方,调用以下方法
   this.$store.dispatch("updateNum", 500);