Vuex的使用,以及数据持久化

JoelJoanne 发布于9天前 阅读194次
0 条评论

一、什么是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

    clipboard.png

    clipboard.png

二、数据持久化

  • 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'

    clipboard.png

  • mapGetters import { mapGetters} from 'vuex'

    clipboard.png

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

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

查看原文: Vuex的使用,以及数据持久化

  • heavygorilla
  • goldenfish
  • organicrabbit
  • crazypanda
  • yellowduck
  • lazybear
  • WallaceIsidore
  • BrownRosemary
  • william-xue
需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。