y***@qq.com
y***@qq.com
  • 发布:2020-06-27 20:33
  • 更新:2022-05-10 11:43
  • 阅读:12332

uniapp 状态管理示例 vuex 以及状态持久化

分类:uni-app

uniapp 状态管理以及持久化

安装如下依赖:vuex (vuex 状态管理使用),vuex-persistedstate(状态持久化使用)

store.js ,文件内容示例

// 引入依赖  
import Vue from 'vue'  
import Vuex from 'vuex'  
import createPersistedState from 'vuex-persistedstate'  
  
Vue.use(Vuex)  
  
const state = {  
  favorites: [],  
  username:"",  
  demoxxxx: ""  
}  
  
export default new Vuex.Store({  
  state,  
  plugins: [  
    // 可以有多个持久化实例  
    createPersistedState({  
      key: 'app_config_data',  // 状态保存到本地的 key   
      paths: ['favorites', 'username'],  // 要持久化的状态,在state里面取,如果有嵌套,可以  a.b.c   
      storage: {  // 存储方式定义  
        getItem: (key) => uni.getStorageSync(key), // 获取  
        setItem: (key, value) => uni.setStorageSync(key, value), // 存储  
        removeItem: (key) => uni.removeStorageSync(key) // 删除  
      }  
    })  
  ]  
})

main.js 文件

import Vue from 'vue'  
import store from 'store.js' // 文件的路径自己看着办,这里只是实例  
  
const app = new Vue({  
  store,  // store 丢这  
  ...App  
})  
app.$mount()

示例页面,仅js部分

<script>  
import { mapState, mapMutations } from 'vuex'  
export default {  
  data:() => ({  
     demo: "demo",  
  }),  
  computed: {  
    // 映射两个状态到页面示例中,可以直接访问,实时获取state的值,更多请自行了解vuex  
    ...mapState(['username','favorites'])   
  },  
}  
</script>

解释

Q:为什么不在template里面是有$store.state.xxx进行访问,而使用 mapState ?
A:因为 uniapp 不支持(或者说只能弯道实现,在 main.js 中 Vue.$store = store),因此使用 mapState 来访问

更多请了解

vuex-persistedstate: https://www.npmjs.com/package/vuex-persistedstate
vuex:https://vuex.vuejs.org/zh/

2 关注 分享
昨夜悟空 若小若

要回复文章请先登录注册

1***@139.com

1***@139.com

目前不知道 Pinia 是否支持和 vuex-persistedstate 结合使用了
2022-05-10 11:43
大图APP

大图APP

nvue 你试试
2021-03-19 18:00
6***@qq.com

6***@qq.com

回复 懵萌 :
你小程序刷新一个试试
2020-12-18 16:19
菜菜2

菜菜2

回复 懵萌 :
没有生效吧
2020-12-17 09:11
懵萌

懵萌

回复 懵萌 :
少了storage
2020-11-14 14:08
懵萌

懵萌

小程序上能使用vuex-persistedstate?
2020-11-14 13:57