VUEX怎么修改state数据?
我们知道在VUEX中获取state数据可以通过this.$store.state.变量名进行获取,那么按常理来说,要想修改这个变量我们重新给他赋个值就行了。this.$store.state.helloWorld = "你好世界"不过官方不建议这么做,因为直接赋值的话我们VUEX无法对这个变量进行跟踪,无法得知state中的helloWorld变量在哪里被修改了;所以下面我们使用官方推荐的方案。首
·
我们知道在VUEX中获取state数据可以通过this.$store.state.变量名进行获取,那么按常理来说,要想修改这个变量我们重新给他赋个值就行了。
this.$store.state.helloWorld = "你好世界"
不过官方不建议这么做,因为直接赋值的话我们VUEX无法对这个变量进行跟踪,无法得知state中的helloWorld变量在哪里被修改了;所以下面我们使用官方推荐的方案。首先我们来到VUEX所在的入口文件中,写入mutations对象
import Vue from 'vue'
import Vuex from 'vuex'
//全局注册Vuex
Vue.use(Vuex)
//定义并导出Vuex对象,供其他文件使用
export default new Vuex.Store({
store : {
helloWorld : 'Hello World!'
},
mutations : {
//在这里定义修改helloWorld的方法,到时候调用SET_HW就可以修改了
SET_HW (str) {
this.helloWorld = str
}
}
})
接下来我们来到需要修改helloWorld变量的文件中,在methods中定义一个函数
methods : {
//这里我们新建一个函数给组件调用
onClick () {
//第一个参数为mutations中定义的函数,第二个参数为该函数的参数
//如果有多个参数需要传递可以使用对象{}
this.$store.commit('SET_HW', '你好世界')
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)