Taro 中使用 Vuex & 数据持久化存储

前言

许久没有关注小程序的生态圈发展，这两天发现在造轮子这一块，各大厂商都玩的天花乱坠。最近打算开始试试由京东开发的 Taro，记录一下上手体验以及遇到的一些小问题。

是什么

官方说明：

Taro 是一个开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ / 飞书小程序 / H5 / RN 等应用。

简言之，Taro 旨在：**只编写一套代码，就能够多端运行。**

上手

具体流程可参考官方文档：
Taro

数据状态管理 (Vuex)

由于我选择的是 Vue 来开发，所以状态管理选择的是 Vuex.

安装 vuex
```
yarn add vuex
```

项目集成

新建 src/store/index.js

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
  state: {
    userinfo: {
      nickname: "zhangsan",
    },
  },
  mutations: {},
});

app.js 中引入 store

// 部分代码
import store from "./store";

const App = {
  store,
  render(h) {
    return h("block", this.$slots.default);
  },
};

export default App;

至此发现，**和 Vue 的开发也没什么区别**

数据持久化存储

选用 vuex-persistedstate

安装
```
yarn add vuex-persistedstate
```

项目集成

改造 src/store/index.js

import Vue from "vue";
import Vuex from "vuex";
import persistedState from "vuex-persistedstate";
Vue.use(Vuex);
export default new Vuex.Store({
  state: {
    userinfo: {
      nickname: "zhangsan",
    },
  },
  mutations: {
    testChangeNickname: (state, payload) => {
      state.userinfo.nickname = payload.nickname;
    },
  },
  plugins: [persistedState()],
});

在 state 中特别加入 userinfo: { nickname: 'zhangsan' }, mutations 中加入 testChangeNickname 来测试调用。

编译发现很尴尬，报错了。

setItem of undefined

看起来是 persistedState 的 storage 默认使用的是 window 所导致的，而小程序里肯定不能直接调用 window.

再改 src/store/index.js

// 部分代码
import Taro from "@tarojs/taro";
plugins: [
  persistedState({
    storage: {
      getItem: (key) => {
        return Taro.getStorageSync(key);
      },
      setItem: (key, value) => {
        Taro.setStorageSync(key, value);
      },
      removeItem: (key) => {
        Taro.removeStorageSync(key);
      },
    },
  }),
];

将 getItem、setItem、removeItem 全部改成 Taro 调用

编译正常。

业务测试

获取 state

computed: {
  nickname() {
    return this.$store.state.userinfo.nickname
  }
},

触发 mutations

this.$store.commit("testChangeNickname", { nickname: "lisi" });

结语

至此，完成 Taro 中使用 Vuex & 数据持久化存储。

持续踩坑中…