【Vue1.0】——Vuex1.0使用教程（简单并附代码）

作用

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

安装

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

在当前项目文件夹npm install [email protected]

代码

在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父组件中引用，这样后面的子组件就不用再引用了

在子组件中的使用如下

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