vue使用watch监听Vuex中存储的值变化

复制

1.在vuex创建值

复制

import Vue from "vue"
import Vuex from "vuex"
 
Vue.use(Vuex);
 
export default new Vuex.Store({
    state:{
        listData:[],
        activeName:'',
        stateTypes:1,
        token:window.sessionStorage.getItem("token"),
    },
    mutations:{
       searchData(state,listData){
        console.log(listData,"搜索后")
        state.listData = listData
       },
       loadDataList(state,listData){
        console.log(listData,"l;ist")
        state.listData = listData
       },
       setActiveName(state,activeName){
        state.activeName = activeName
       },
       setTypes(state,stateTypes){
        console.log(stateTypes,"是否成功了")
        state.stateTypes = stateTypes
       },
       setToken(state,token){
        state.token = token
       },
    }
})复制

2.更改vuex的值

this.$store.commit('searchData', arrayList)复制

3.使用计算属性获取到vuex的数据

computed: {
 
   newData() {
 
       return this.$store.state.listData
 
     },
 
},复制

4.使用监听属性获取到vuex的数据

复制

watch: {
 newData: {
 
   handler(val) {
 
      this.show_data = val
 
    },
 
 },
 
},复制