mpvue 中使用vuex 的两种方式

麻烦版

1. 在 src目录下创建 store.js文件

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    str: 'in store',
    num: 521
  }
})
export default store

2. 页面的 index.vue文件引入

import store from '../../store'

3. 页面使用

store.state.str

省事版

上面简单的介绍了一下如何在 vue 中使用 vuex。但这里面有个问题，当我们有无数个页面都需要用到 store 的时候，你就需要无数次引用，并且上面的方式在子组件中并不能访问到 store。所以就有了接下来的省事版。
在根目录的 main.js中做如下调整

import Vue from 'vue'
import App from './index'
// 引入 store
import store from '../../store'
//Vue 挂载 store
Vue.prototype.$store = store
const app = new Vue(App)
app.$mount()

使用：

this.$store.state.str

motation 修改 state

增加 motation后的 store 文件

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    str: 'hello world',
    num: 521
  },
  mutations: {
    changeStr (state, value) {
      state.str = value
    }
  }
})
export default store

vue文件中修改

mounted () {
    console.log('有什么区别吗')
    console.log(this.$store.state.str)
    this.$store.commit('changeStr', '88 world')
    console.log(this.$store.state.str)
  }

这样虽然能证明我们每次都可以在页面使用 commit修改 store 文件，但却不是持久化的，那么我们如何在小程序中做到持久化呢？

vuex-persistedstate 实现持久化

store.js文件修改如下

import Vue from 'vue'
import Vuex from 'vuex'
// 引入持久化插件
import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    str: 'hello world',
    num: 521
  },
  mutations: {
    changeStr (state, value) {
      state.str = value
    }
  },
  plugins: [
    createPersistedState({
      storage: {
        getItem: key => wx.getStorageSync(key),
        setItem: (key, value) => wx.setStorageSync(key, value),
        // removeItem: key => wx.clearStorageSync(key)
        removeItem: key => () => {}
      }
    })
  ]
})
export default store

上述实践可行。