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

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/