本文介绍了如何在Vue项目中引入和配置Vuex来管理全局状态。首先在main.js中导入并创建store实例，然后在store/index.js中定义全局state。接着展示了如何通过`this.$store.state`来修改变量，以及在组件中使用计算属性和watch监听并获取state数据。通过这种方式，可以实现组件间的状态共享和更新。
1.引入store
安装引入vuex，在main.js里面：
import store from ‘./store‘//+++
new Vue({
el: ‘#app‘,
router,
store,//+++
components: { App },
template: ‘‘
})
在store文件夹下创建index.js入口文件,添加下面内容：
import Vue from ‘vue‘;
import Vuex from ‘vuex‘;
Vue.use(Vuex);
const state = {//要设置的全局访问的state对象
textData: "Data from index",
};
const store = new Vuex.Store({
state
});
export default store;
全局变量写在state里。
2.修改变量
在需要修改的地方使用this.$store.state.textData =XXX进行修改：
watch: {
dbData: function() {
this.$store.state.textData = this.dbData;
}
}
3.获取变量
在需要获取的地方使用 XXX=this.$store.state.textData进行获取：
data() {
return {
title: "11",
textData: ""
};
},
computed: {
text() {
return this.$store.state.textData; //需要监听的数据
}
},
watch: {
text(newVal, oldVal) {
let that = this;
//do something
this.textData = newVal;
},
},
535
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
