web Store存储全局数据

Vuex.Store存储全局数据

目录结构

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import baseinfo from './modules/baseinfo'

Vue.use(Vuex)
export default new Vuex.Store({
  modules: {
    baseinfo
  }
})

baseinfo.js

const SET_CHANNEL = 'SET_CHANNEL'
const SET_VERSION = 'SET_VERSION'
const SET_ITEM = 'SET_ITEM'

const baseinfo = {
  state: {
    channel: [],
    version: [],
    item: []
  },
  mutations: {
    [SET_CHANNEL](state, channel) {
      state.channel = channel
      console.log("state.channel.length:", state.channel.length)
    },
    [SET_VERSION](state, version) {
      state.version = version
      console.log("state.version.length:", state.version.length)
    },
    [SET_ITEM](state, item) {
      state.item = item
      console.log("state.item.length:", state.item.length)
    }
  },
  actions: {
    setChannel({ commit }, channel) {
      commit(SET_CHANNEL, channel)
    },
    setVersion({ commit }, version) {
      commit(SET_VERSION, version)
    },
    setItem({ commit }, item) {
      commit(SET_ITEM, item)
    }
  },
  getters: {
    channel: state => state.channel,
    version: state => state.version,
    item: state => state.item
  }
}
export default baseinfo

读取

import store from '../../store'
this.tableChannelCfg = store.getters.channel

修改

import store from '../../store'
store.dispatch('setChannel', items)

注意：读取最新数据时，需要重新读取。

refer：https://www.jianshu.com/p/eb23c72ab02a