vuex存数据实现两个页面数据同步

跳跳向日葵

于 2024-10-25 22:22:24 发布

阅读量240

点赞数 2

文章标签： java 前端服务器 vue.js javascript

本文链接：https://blog.youkuaiyun.com/u011107860/article/details/143244965

版权

state: {
    token: getToken(),
    navProjectLists: [], //右上角项目下拉数据
  },

  mutations: {
    SET_TOKEN: (state, token) => {
      state.token = token
    },
     setNavProjectLists: (state, navProjectLists) => {
      state.navProjectLists = navProjectLists
    }
  },

actions: {
    updateNavProjectLists({ commit }) {
      let data = {};
      data.pageSize = 10000;

      return new Promise((resolve, reject) => {
        getList(data).then(res => {
          const projectDatas = res.rows.map(item => ({
            text: item.cname,
            value: item.id
          }));
  
          commit('setNavProjectLists', projectDatas)
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },

需求是创建项目列表增删改后右上角的项目下拉数据要同步下；需要给数据存起来监听数据变化；

async getOption() {
      // this.consumers = (await getOptions("loginCompanyId")) || [];
      this.$store.dispatch("updateNavProjectLists").then(() => {
        this.consumers = this.$store.state.user.navProjectLists; // 从 getter 中获取更新后的值
        let str = localStorage.getItem("selectConsumerId");
        if (str) {

        } else {
          this.consumerId = this.consumers[0]?.value;
          localStorage.setItem("selectConsumerId", this.consumerId);
        }
      });
    },

 watch: {
    '$store.state.user.navProjectLists': {
      handler(val) {
        this.consumers = this.$store.state.user.navProjectLists
        this.consumerId = this.consumers[0]?.value;
        localStorage.setItem("selectConsumerId", this.consumerId);
      },
      deep: true
    }
  },

 refreshList() {
      this.$refs.baseTable.onSearch()
      this.$store.dispatch("updateNavProjectLists")
    },