vuex使用方法/如何使用

2022/7/12 23:31:07

本文主要是介绍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);


这篇关于vuex使用方法/如何使用的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程