作用

我理解的vuex是用来管理vue的全局变量的，并且可以数据实时更新

安装

先看一下你用的vue是哪个版本，安装对应的vuex，因我之前使用的vue1.0，所以安装的vuex1.0

在当前项目文件夹npm install vuex@1.0

代码

在app文件夹下建vuex文件夹，文件夹内包括两个文件：store.js和actions.js。
store.js
用于定义state和mutations，代码

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
  //登录状态
  logStatus:false,
  //角色
  role:''
}
const mutations = {
  //设置登录状态
  SET_LOGSTATUS(state,val){
    state.logStatus=val
  },
  //设置角色
  SET_ROLE(state,val){
    state.role=val
  }
 }
 export default new Vuex.Store({
   state,
   mutations
})

actions.js
用于对变量的操作，代码

export const setLogStatus = ({ dispatch },val) => {
  //注意，这里的SET_LOGSTATUS对应的就是store.js，一定要一模一样
  dispatch('SET_LOGSTATUS',val)
}
export const setRole = ({ dispatch },val) => {
  dispatch('SET_ROLE',val)
}

使用

最高级的vue父组件中引用，这样后面的子组件就不用再引用了

<script>
  import store from './vuex/store.js'
  export default {
    store: store
  }
</script>

在子组件中的使用如下

<script>
    import { setLogStatus,setRole  } from '../vuex/actions'
    export default {
    vuex: {
        actions: {
              setLogStatus,
              setRole
        },
        getters:{
            logStatus:state=>state.logStatus,
            role:state=>state.role
        }
      },
      methods:{
          logIn:function(){
              //...省略业务相关代码...
              this.setLogStatus(true);
              this.setRole('客服');
          }
      }
</script>

当然，如果不需要修改store.js中变量的值，在子组件中只要getter就好，不需要import和actions了