vuex相关

作者: 吃橙子的仓鼠 | 来源:发表于2021-02-19 11:55 被阅读0次
    1. 从vuex中取的数据,不能直接更改,单向数据流

    需要浅拷贝对象之后更改,否则报错;

    getTalkGroupInfo (id) { 
      this.talkGroupInfo = this.$store.state.talkGroup
      let newObj = Object.assign({}, this.modifyId)
      this.modifyInfo = newObj 
    }
    
    2. vuex中的数据在页面刷新后数据消失

    (1) 用sessionstorage 或者 localstorage 存储数据

    存储: 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
    

    相关文章

      网友评论

        本文标题:vuex相关

        本文链接:https://www.haomeiwen.com/subject/nrqaxltx.html