Vuex笔记

Vuex

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

Vuex的关键词：

• store:store是vuex的核心，store是一个容器，其中包含你的状态（state）
• state:类似于全局变量。驱动应用的数据源，用于保存所有组件的公共数据
• getter:类似于计算属性。
• mutation:类似于方法。第一个参数是state，第二个参数是用户自定义的参数，mutations对象里的方法需要使用store.commit调用
• action: Action 提交的是 mutation 而不是直接变更状态。action 可以包含任意异步操作。actions 对象里的方法需要使用 store.dispatch 调用
      Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。
• module:由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。

安装

npm install vuex --save-dev

配置store的index.js

在src下，新建一个store文件夹，里面新建index.js

import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex);

export default new Vuex.Store({
    state:{
      // 自定义的全局变量
        token:"",
        currUserPassword:"",
        currUserName:"",
        currUserPhoneNumber:"",
        currUserEmailNumber:""
    },
    getters:{
        getToken(state){
           return state.token;
        },
        getUserName(state){
            return state.currUserName;
        },
        getUserPassword(state){
          return state.currUserPassword;
        },
        getUserPhoneNumber(state){
          return state.currUserPhoneNumber;
        },
        geteUserEMailNumber(state){
          return state.currUserEmailNumber;
        }

    },
    mutations:{
      // 方法
        // 保存token
        setToken(state,token){
            state.token = token;
        },
        // 保存用户名密码
        setUserPassword(state,currUserPassword){
            state.currUserPassword = currUserPassword;
        },
        // 保存用户名称
        setUserName(state,currUserName){
            state.currUserName = currUserName;
        },
        // 保存所有数据源
        setEmailNumber(state,currEmailNumber){
            state.currEmailNumber = currEmailNumber;
        },
        setPhoneNumber(state,currPhoneNumber){
            state.currPhoneNumber = currPhoneNumber;
        }
      }
})

在main.js中，引入store.js

import store from './store'

在js中，调用store

this.$store.commit('setToken',response.data.data); // 将数据存入token
this.$store.state.token // 直接读取token
this.$store.getters.getToken // 读取计算属性token