vue--怎样使用vuex储存信息

原创
小哥 3年前 (2022-11-10) 阅读数 7 #大杂烩

vue--如何使用vuex储存数据

1.定义

最后形成这样的结构,system.js用于自定义存储

2.需要定义三个位置

1.store/index.js

import Vue from vue
import Vuex from vuex
import getters from ./getters
import system from ./modules/system

Vue.use(Vuex)

const store = new Vuex.Store({
    modules: {
        system
    },
    getters
})

export default store

2.store/getters.js

const getters = {
    projectUnit: state => state.system.projectUnit,
    projectTitleId: state => state.system.projectTitleId,
}
export default getters

3.store/modules/system.js

  const system = {
      namespaced: true,
      state: {
          projectTitleId: "",
          projectUnit: {},
      },
      mutations: {
          SET_PROJECTTITLEID: (state, projectTitleId) => {
              state.projectTitleId = projectTitleId
          },
          SET_PROJECTUNIT: (state, projectUnit) => {
              state.projectUnit = projectUnit
          },
      }
  }

  export default system

3.向其中添加数据

this.$store.commit("system/SET_PROJECTUNIT", this.projectUnit);//在store/modules/system.js查找内部的相应数据
this.$store.commit( "system/SET_PROJECTTITLEID",this.Form.id);

4.取数据

this.$store.getters.projectUnit
this.$store.getters.projectTitleId
版权声明

所有资源都来源于爬虫采集,如有侵权请联系我们,我们将立即删除