vuex相關(guān)

1. 從vuex中取的數(shù)據(jù),不能直接更改,單向數(shù)據(jù)流

需要淺拷貝對象之后更改,否則報錯;

getTalkGroupInfo (id) { 
  this.talkGroupInfo = this.$store.state.talkGroup
  let newObj = Object.assign({}, this.modifyId)
  this.modifyInfo = newObj 
}
2. vuex中的數(shù)據(jù)在頁面刷新后數(shù)據(jù)消失

(1) 用sessionstorage 或者 localstorage 存儲數(shù)據(jù)

存儲: sessionStorage.setItem( '名', JSON.stringify(值) )
使用: sessionStorage.getItem('名') ---得到的值為字符串類型,用JSON.parse()去引號;

(2) 安裝vuex-persist插件

import Vue from 'vue'
import Vuex from 'vuex'
import VuexPersistence from 'vuex-persist'
import createLogger from 'vuex/dist/logger'
import getters from './getters'
Vue.use(Vuex)

// vuex 持久化存儲
const vuexLocal = new VuexPersistence({
  storage: window.sessionStorage,
  modules: [ 'router', 'menu','company']
})

const modulesFiles = require.context('./modules', true, /\.js$/)

// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  // set './app.js' => 'app'
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})

const store = new Vuex.Store({
  modules,
  getters,
  plugins: debug ? [createLogger(), vuexLocal.plugin] : [vuexLocal.plugin]
})

export default store
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容