vuex-persistedstate结合mp-store使用

如果您需要将vuex-persistedstate与mp-store结合使用，可以按照以下步骤进行操作：

1. 安装依赖

需要安装vuex-persistedstate和mp-store这两个依赖：

npm install vuex-persistedstate mp-store --save

2. 在store中使用vuex-persistedstate插件

在store中使用vuex-persistedstate插件来实现持久化存储。下面是一个示例：

import { PersistedState } from 'vuex-persistedstate'
import mpStore from 'mp-store'

const state = {
  count: 0
}

const mutations = {
  increment (state) {
    state.count++
  }
}

const actions = {
  increment ({commit}) {
    commit('increment')
  }
}

const plugins = [
  PersistedState({
    key: 'my-store',
    storage: {
      getItem: (key) => {
        return mpStore.getStorageSync(key)
      },
      setItem: (key, value) => {
        return mpStore.setStorageSync(key, value)
      },
      removeItem: (key) => {
        return mpStore.removeStorageSync(key)
      }
    }
  })
]

export default {
  state,
  mutations,
  actions,
  plugins
}

在上述代码中，使用了PersistedState插件来实现持久化存储。同时，为了适配mp-store，需要在storage配置中指定getItem、setItem和removeItem方法，这些方法分别对应mpStore.getStorageSync、mpStore.setStorageSync和mpStore.removeStorageSync。这样，就可以在小程序中使用vuex-persistedstate进行持久化存储了。

3. 在小程序中引入store

在小程序中引入store，并使用其中的状态和方法。下面是一个示例：

<template>
  <div>
    <p>Count: {{count}}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import store from '@/store'

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapActions(['increment'])
  },
  onLoad () {
    console.log(store.state.count) // 输出初始值0
    store.dispatch('increment')
    console.log(store.state.count) // 输出1
  }
}
</script>

在上述代码中，通过import引入store，并使用mapState和mapActions辅助函数来将count属性和increment方法映射到组件中。在onLoad生命周期中，可以通过store.state.count访问到初始值0，并通过store.dispatch('increment')调用increment方法，最后输出count属性的值1。这样，就可以在小程序中使用vuex-persistedstate进行持久化存储了。