脚本宝典收集整理的这篇文章主要介绍了【Vue1.0】——Vuex1.0使用教程（简单并附代码），脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

作用

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

安装

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

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

代码

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

@H_777_28@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了

脚本宝典总结

以上是脚本宝典为你收集整理的【Vue1.0】——Vuex1.0使用教程（简单并附代码）全部内容，希望文章能够帮你解决【Vue1.0】——Vuex1.0使用教程（简单并附代码）所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。