Vuex的使用以及数据持久化

41次阅读

共计 1005 个字符,预计需要花费 3 分钟才能阅读完成。

一、什么是 vuex

  • vuex:是一个专为 vue.js 开发的状态管理器,采用集中式存储的所有组件状态
  • 五个属性:state、getters、mutations、actions、module
  • 基本使用:
    新建 store.js 文件,最后在 main.js 中引入,并挂载到实列上

       import Vue from 'vue'
       import Vuex from 'vuex'
       Vue.use(Vuex)
       const state = {}
       const getters = {}
       const mutations = {}
       const actions = {}
       export default new Vuex.Store({
           state,
           getters,
           mutations,
           actions
       
       })
  • state 属性:存放状态,例如你要存放的数据
  • getters:类似于共享属性,可以通过 this.$store.getters 来获取存放在 state 里面的数据
  • mutations:唯一能改变 state 的状态就是通过提交 mutations 来改变,this.$store.commit()
  • actions: 一步的 mutations,可以通过 dispatch 来分发从而改变 state

二、数据持久化

  • vuex 里面存放的数据,页面一经刷新会丢失:
    解决办法:存放在 localStorage 或者 sessionStorage 里面,进入页面时判断是否丢失,丢失再去 localStorage 或者 sessionStorage 里面取;
    在 app.vue 根组件的 created 里面判断是否丢失,在进行上面的操作;
  • vuex-persistedstate 插件

    cnpm i vuex-persistedstate -S
    

    之后在 store.js 里面导入

       
       import createPersistedState from 'vuex-persistedstate'
       export default new Vuex.Store({
         state,
         getters,
         mutations,
         actions,
         plugins: [createPersistedState()]
       )}
    
    

    这样的话就可以做到数据持久化啦

三、map 辅助函数

  • mapActions:
    在组件内导入 import {mapActions} from 'vuex'

  • mapGetters import {mapGetters} from 'vuex'

 其他的 mapState,mapMutations 也是一样操作

参考链接:vuex 数据持久化插件
vuex 官网

正文完
 0