vuex状态存储的使用

vuex状态存储的使用

1、先定义一个状态

const state = {
  sidebar: {
    opened: true,
    withoutAnimation: false
  },
  device: 'desktop',
  projectId: sessionStorage.getItem('projectId'),
  type:0,
  //新添加一个状态 从sessionStorage里面去拿
  projectType: sessionStorage.getItem("projectType"),
}
//mutations 由于修改state中的参数的
const mutations = {
  toggle_sideBar: state => {
    state.sidebar.opened = !state.sidebar.opened
    state.sidebar.withoutAnimation = false
  },
  close_sideBar: (state, withoutAnimation) => {
    state.sidebar.opened = false
    state.sidebar.withoutAnimation = withoutAnimation
  },
  get_projectId:(state,id)=>{
    state.projectId = id 
  },
  get_type:(state,type)=>{
    state.type = type
  },
  toggle_device: (state, device) => {
    state.device = device
  },
  // 设置这个类型修改状态的方法
  get_projectType:(state,projectType)=>{
    state.projectType = projectType
  },
}
// 用于提交mutations 操作的
const actions = {
  toggleSideBar({ commit }) {
    commit('toggle_sideBar')
  },
  closeSideBar({ commit }, { withoutAnimation }) {
    commit('close_sideBar', withoutAnimation)
  },
  toggleDevice({ commit }, device) {
    commit('toggle_device', device)
  },
  getProjectId({ commit }, id) {
    commit('get_projectId', id)
  },
  getType({ commit }, type) {
    commit('get_type', type)
  },
  //提交设置projectType的操作
  getProjectType({ commit }, projectType) {
    commit('get_projectType', projectType)
  }
}
export default {
  namespaced: true,
  state,
  mutations,
  actions
}

2、在页面中 如果是单独获取某个状态的话

data() {
    return {
      projectName: "",
      projectData: [],
      projectInfo: {},
      regionList: [],
      regionProps: {
        value: "id",
        label: "regionName",
      },
      //这里可以获取到状态
      projectType: this.$store.state.app.projectType,
    };
  },
  methods: {
  
    getProjectInfoData() {
      let params = {
        page: 1,
        rows: 500,
        //根据这个状态去查询数据
        projectType: this.projectType
      };
      getProjectInfo(params).then((res) => {
        this.projectData = res.rows;
        this.projectData.map((e) => {
          if (e.id === Number(this.$store.state.app.projectId)) {
            this.projectInfo = e;
          }
        });
      });
    },

3、在页面中 如果是这个状态是变化的话

data() {
    return {
      projectName: "",
      projectData: [],
      projectInfo: {},
      regionList: [],
      regionProps: {
        value: "id",
        label: "regionName",
      },
      //这里可以获取到状态 这里只能初始化获取，后面改不了，他不会自动重新获取
      //projectType: this.$store.state.app.projectType,
    };
  },
  methods: {
  
    getProjectInfoData() {
      let params = {
        page: 1,
        rows: 500,
        //根据这个状态去查询数据
        projectType: this.projectType
      };
      getProjectInfo(params).then((res) => {
        this.projectData = res.rows;
        this.projectData.map((e) => {
          if (e.id === Number(this.$store.state.app.projectId)) {
            this.projectInfo = e;
          }
        });
      });
      //点击按钮
      handleClick(row) {
	      this.projectName = row.entryName;
	      this.projectInfo = row;
	      sessionStorage.setItem("project", JSON.stringify(row));
	      sessionStorage.setItem("projectId", row.id);
	      //切换了其他类型(不同的projectType值) 重新去存储到sessionStorage中
	      sessionStorage.setItem("projectType", row.projectType);
	      this.$store.dispatch("app/getProjectId", row.id);
	      //使用dispatch方法用来提交操作
	      this.$store.dispatch("app/getProjectType", row.projectType);
	      sessionStorage.setItem("projectName", row.entryName);
	      getActivekMenus();
    	},
    },

3、在其他页面中通过判断状态的改变去做相关操作

watch: {
	//侦听状态如果变化了则做相关操作，没有则不执行
      projectType(newV, oldV) {
        this.menus = JSON.parse(sessionStorage.getItem("projectData"));
        this.$router.push({ path: "/" + this.menus[0].path });
        this.activeIndex = 0;
      }
    },
computed: {
	//获取状态
      projectType() {
        return this.$store.state.app.projectType;
      }
    },