配置 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.xxx 来取,具体使用

   created() {
       console.log(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);