vuex使用方法/如何使用

vuex使用方法/如何使用

什么是vuex？

vuex是多个组件共享数据或者是跨组件传递数据，为组件之间的数据传递提供了一个全局变量。

如何使用？

1.声明全局变量

在 src/store 文件夹下的 index.js 中创建变量

//state：数据仓库
const state = {
  globalNum: {
    numb1: 10,
    numb2: 20,
  },
};

2.声明修改全局变量的方法

//mutations：修改state的唯一手段
const mutations = {
    editNumb(state, payload) {
        state.globalNum.numb1 = payload;
    },
}

3.获取全局变量

console.log(this.$store.state.globalNum.numb1 );

4.修改全局变量

不建议直接修改，因为这样不能使用 vuex 的浏览器插件来跟踪状态的变化，不利于调试。

this.$store.commit("editNumb", 999);