Vue中使用watch监听Vuex中的数据变化以及vuex储存和读取

首先是vuex存储数据和读取数据：

首先

 在state初始化一个参数，如果要改变state里的值，在mutation定义一个方法：

 

储存数据：(也就是改变vuex里的参数值)

 

 读取数据：(这里用了一个watch监听方法，当vuex里的值发生变化的时候会调用watch方法)

 

 注意这里重新请求数据的时候需要async await，不然还没请求结束就渲染完成了

 

 

 全部代码：

store/index.js:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
	  selTime: '',
  },
  mutations: {
	  setSeltime: (state,time) =>{
		  state.selTime = time
	  }
  },
  actions: {
  },
  modules: {
  }
})

 index.vue: 储存

this.$store.commit('setSeltime',arrtime);

center.vue：读取渲染

computed: {
	  storeTime(){
		  return this.$store.state.selTime;
	  }
  },
  watch:{ // 实时检测
	async storeTime(index){
		this.startTime = index[0];
		this.endTime = index[1];
		console.log("监听数据",[this.startTime,this.endTime]);
		let params= {
		   reportType: 1,
		   platform: 1,
		   column: 'profit3',
		   isHome: 'true',
		   startTime: this.startTime,
		   endTime: this.endTime
		};
		let data = await centerOne(params);
		let _this = this;
		_this.list = data.data;
		// setTimeout(()=>{
		this.changeNum();
		// },3000);
	}
  },

 参数详解

 

store.js的state中

1 2 3

const state = {     xxx:'',//把存的那个值的名字初始化一下 }

store.js的matution中

1 2 3

setValue(state,item){     state.xxx= item;//第二个参数随意起个名   },

组件内取值

1 2 3 4 5 6

//在计算属性中取值,js直接这样写拿到值,html用直接xxx使用  computed: {         value() {       return this.$store.state.xxx;     }   },