vuex的应用

需求:系统顶部添加项目下拉框,顶部下拉框选项改变时其他模块下拉框同时改变。

1.开始进入系统的时候获取项目列表

页面调用接口

// 获取项目列表
store.dispatch("getProject").then(() => {});

store新建project.js

import { listProjectNoPage } from "@/api/system/project";

const project = {
  state: {
    projectList: [],
    projectId: "",
  },

  mutations: {
    SET_PROJECT_LIST: (state, projectList) => {
      state.projectList = projectList;
    },
    SET_PROJECT_ID: (state, projectId) => {
      state.projectId = projectId;
    },
  },

  actions: {
    // 获取用户项目信息
    getProject({ commit, state }) {
      return new Promise((resolve, reject) => {
        listProjectNoPage()
          .then((res) => {
            const dataList = res.data;
            if (dataList.length > 0) {
              const projectId = dataList[0].projectId;
              const projectOptions = dataList.map((item) => {
                return {
                  value: item.projectId,
                  label: item.projectName,
                  ...item,
                };
              });
              commit("SET_PROJECT_ID", projectId);
              commit("SET_PROJECT_LIST", projectOptions);
            }
            resolve(res);
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
    // 修改选中项目
    changeProject({ commit }, data) {
      commit("SET_PROJECT_ID", data);
    },
  },
};

export default project;

2.系统顶部引入项目列表监听变化

html

<el-select v-model="sysProjectId" placeholder="请选择项目" filterable>
     <el-option v-for="(item, index) in sysProjectList" :key="index" :label="item.label" :value="item.value" />
 </el-select>

js

import { mapGetters } from 'vuex'
computed: {
    ...mapGetters([
      'sysProjectList',
    ]),
    sysProjectId: {
      get () {
        return this.$store.state.project.projectId
      },
      set (val) {
        this.$store.dispatch('changeProject', val)
      }
    }
  },

3.各子模块引入vuex下的项目列表 项目id

html

<el-form-item label="所属项目" prop="projectId">
        <el-select v-model="queryParams.projectId" placeholder="所属项目" filterable clearable @change="handleQuery">
          <el-option v-for="(item, index) in sysProjectList" :key="index" :label="item.label" :value="item.value" />
        </el-select>
</el-form-item>

js

import { mapGetters } from 'vuex'
computed: {
    ...mapGetters([
      'sysProjectId',
      'sysProjectList',
    ]),
  },
  watch: {
    sysProjectId (newVal, oldVal) {
      // 系统顶部选中项目变化
      this.queryParams.projectId = newVal
      this.getList()
    }
  },
  created () {
    this.queryParams.projectId = this.sysProjectId
    this.getList();
  },