pinia的使用 + pinia-plugin-persistedstate持久化

一、安装

npm install pinia

二、引入

//main.ts
import { createPinia } from 'pinia'
app.use(createPinia());

三、定义store

第一步：先在在src目录下创建stores文件夹存放每个store

第二步：编写模块文件

import { defineStore } from "pinia";
export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    double: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

四、使用pinia

import { storeToRefs } from "pinia";
import { useThemeStore } from "../../stores/theme";
const store = useThemeStore();
const { count, increment} = storeToRefs(store); //此时数据为响应式
//或者这样也是响应式，直接解构不是响应式数据
const doubleValue = computed(() => store.count)
const { increment} = store; //方法解构

五、持久化处理

首先安装 npm i pinia-plugin-persistedstate
参考地址：https://prazdevs.github.io/pinia-plugin-persistedstate/guide/

// 引入
import { createPinia } from "pinia";
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";

const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);
export default pinia;

export * from "./modules/user.js";

使用示例
这样使用之后每次数据state中数据变化都会存到本地了

export const useUserStore = defineStore("user", {
  state: () => {
    return {
      token: "",
    };
  },
  actions: {
  },
  //与state同级
  persist: {
    storage: {
      getItem: uni.getStorageSync,
      setItem: uni.setStorageSync,
    },
  },
});