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
  • 5
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值