关于Vuex的简单实际应用

Vuex是什么？

Vuex是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。简单来说就是：应用遇到多个组件共享状态时，使用vuex。

应用场景以及流程

• 多个组件共享数据或者是跨组件传递数据时。
• 页面通过mapAction异步提交事件到action，action通过commit把对应参数同步提交到mutation，mutation会修改state中对应的值。最后通过getter把对应值跑出去，在页面的计算属性中，通过mapGetter来动态获取state中的值。

属性

• state：vuex的基本数据，用来存储变量
• geeter：从基本数据(state)派生的数据，相当于state的计算属性
• mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。
•  action：和mutation的功能大致相同，不同之处在于：

                Action 提交的是 mutation，而不是直接变更状态。

                Action 可以包含任意异步操作。

• modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

安装

npm install vuex --save

在src下新建vuex文件夹，在vuex文件夹下新建store.js并引入、注册vuex。

//引入
import Vue from 'vue'
import Vuex from 'vuex'

//注册
Vue.use(Vuex)

const store = new Vuex.Store({
    modules:{
     
    }
  });

export default store;

举例（账号密码保存）

在vuex文件夹下新建user.js并进行相关配置，同时再将上面配置好的store.js再进行修改。

user.js

const user = {
    state:{
      user:"",
      password:""
    },
    mutations:{
      USER_INFO(state,data){
        state.user = data
      },
      USER_INFO_PWD(state,data){
        state.password = data
      }
    },
    actions:{
      saveUserInfo({ commit },data){
        commit('USER_INFO',data)
      },
      saveUserPwd({ commit },data){
        commit('USER_INFO_PWD',data)
      }
    },
    getters:{
        getName:(state)=>state.user,
        getPwd:(state)=>state.password
    }
  };
  export default user

store.js

//引入
import Vue from 'vue'
import Vuex from 'vuex'
import user from './api/user'

//注册
Vue.use(Vuex)

 
const store = new Vuex.Store({
    modules:{
      user
    }
  });

export default store;

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './vuex/store'




/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

Login.vue（关键代码）

         this.axios.post('接口', {
              userId: _this.loginForm.userId,
              passWord: _this.loginForm.passWord
         }).then(response => {
              if (response.data.length) {
                //请求回来后，把用户信息存储到VUEX里
              this.$store.dispatch('saveUserInfo', response.data[0].userId);
              this.$store.dispatch('saveUserPwd', response.data[0].passWord);
                //页面跳转
               this.$router.push("/Home");
               this.$message({
                  message: '恭喜你，登录成功',
                  type: 'success'
                });
             }
              else {
               this.$message.error('请检查用户名或密码');
             }
          })

Home.vue

<template>
  <a>{{Name}}</a>
</template>

import { mapGetters } from 'vuex'
  export default {
    data() {
      return {
       
      };
    },
    computed: {
      Name() {
        return this.$store.getters.getName;
          }
      },
    mounted() {
      //在页面加载时读取sessionStorage里的状态信息
      if (sessionStorage.getItem("store")) {
  this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem("store")))
      }
      //在页面刷新时将vuex里的信息保存到sessionStorage里
      window.addEventListener("beforeunload", () => {
        sessionStorage.setItem("store", JSON.stringify(this.$store.state))
      })
    }
    }
  };
</script>

效果如下：