Vuex 简单点来说，就是用来存储公共变量的，他与我们自己手动封装的 公共组件 最大的区别，就是我们自己手动分装的，不容易做不到响应式，即在一个组件里改变了他的值，在另一个组件里，也随着改变。 我们写在 vue 组件里面的 data 里的值是能够做到响应式的，这是因为 vue 框架自己封装好了

一. Vuex 的结构：

普通的 vue 组件的结构，只有 Actions Vue Components State 这三个部分，但是vue 里面做了一下固定的要求，要求我们，要改变 state，就要使用 Mutations 方法，这是因为 Mutations 这个方法，后边跟了Devtools 这个功能插件，加了这个插件以后，就能对vuex 里的东西进行实时的跟踪，到底是哪个组件改变的 state ，在这个里面都能最终到，而对异步的操作，好使用 Actions 这个方法，为什么？还是因为 devtoos 只能跟踪同步的操作，不能跟踪异步的操作，要用 Actions 对异步的操作进行跟踪。

二.Vuex 的使用

2.1新建文件夹

一般情况下，都是默认使用 store 为默认文件夹。

2.2 建立文件内容

import Vue from 'vue'

// 为了考虑 ie 浏览器的兼容性
import 'es6-promise/auto'
import Vuex from 'vuex'


// 安装插件
Vue.use(Vuex)


// 创建对象
const store = new Vuex.Store({
    
     // 容器
  // 数据
  state: {
    
    
    count: 100,
    Authorization: localStorage.getItem('Authorization') ? localStorage.getItem('Authorization') : '',

    userinfo: {
    
    
      token: null,
      userid: null
    }
  },


  getters: {
    
    
    gettoken(state) {
    
    
      return state.userinfo.token
    },
    getuserid(state) {
    
    
      return state.userinfo.userid
    }
  },
  // 方法
  mutations: {
    
    

    // 添加 token
    addUsertoken(state, token) {
    
    
      state.userinfo.token = token;
    },

    // 添加 id
    addUserId(state, id) {
    
    
      state.userinfo.userid = id;
    },
  },



  // 方法（异步方法）
  actions: {
    
    
    // 添加token
    addUsertokenAction(context, token) {
    
    
      context.commit("addUsertoken", token);
    },


    // 添加user
    addUserIdAction(context, userid) {
    
    
      context.commit("addUserId", userid);
    }
  },


  // 模块
  modules: {
    
    

  },
})

// 导出
export default store