pinia使用教程以及pinia-plugin-persistedstate持久化插件——uniapp

pinia

store

定义

option

import { defineStore } from 'pinia'

// 你可以任意命名 `defineStore()` 的返回值，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。
// (比如 `useUserStore`，`useCartStore`，`useProductStore`)

// 第一个参数是你的应用中 Store 的唯一 ID。
// 第二个参数可接受两类值：Setup 函数或 Option 对象。

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

setup

export const useCounterStore = defineStore('counter', () => {
  // 不能在store中使用私有属性

  // state
  const count = ref(0);
  // getters
  const doubleCount = computed(() => count.value * 2)
  //actions
  function increment() {
    count.value++
  }

  // 必须返回 state 的所有属性
  return { count, doubleCount, increment }
})

使用

<script setup>
import { useCounterStore } from '@/stores/counter'
// 可以在组件中的任意位置访问 `store` 变量
const store = useCounterStore();
// store是一个reactive对象，这意味着我们不能进行解构

// 以下这将不起作用，因为破坏了响应性
const { count , doubleCount } = store
count // 将始终是 0
doubleCount // 将始终是 0

// 以下这样是响应式的
const doubleValue = computed(() => store.doubleCount)
</script>

如果需要提取属性并保持使用，要使用storeToRefs参考如下：

<script setup>
import { storeToRefs } from 'pinia'
const store = useCounterStore()
// `namecount 和 `doubleCount` 是响应式的 ref
const { count, doubleCount } = storeToRefs(store)
// 作为 action 的 increment 可以直接解构
const { increment } = store
</script>

state

重置

使用option时，可以调用$reset()将state重置为初始值

const store = useStore()

store.$reset()

而使用setup，需要自行创建，例如：

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)

  function $reset() {
    count.value = 0
  }

  return { count, $reset }
})

pinia-plugin-persistedstate插件

为什么需要持久化数据？

在使用pinia管理状态时，我们很容易发现，一旦刷新或关闭页面后，状态就会消失重置。但是在多种业务情况下（如登录信息、用户数据），我们需要持久化某些数据，保证用户下一次打开的状态。

官网

https://prazdevs.github.io/pinia-plugin-persistedstate/zh/

安装/基本教程——移步官网

uniapp 中使用

index.js

配置完成后，在所有store中生效：

import {
	createPinia
} from 'pinia'
import {
	createPersistedState
} from 'pinia-plugin-persistedstate'

// 创建 pinia 实例
const pinia = createPinia()
// 使用持久化存储插件
pinia.use(createPersistUni())

/**
 * @description 自定义pinia持久化API存储方式为uni
 */
function createPersistUni() {
	return createPersistedState({
		storage: {
			getItem: uni.getStorageSync,
			setItem: uni.setStorageSync
		}
	})
}

// 默认导出，给 main.js 使用
export default pinia

user.js

如果需要在特定仓库使用，参考如下：

import {
	defineStore
} from 'pinia'

const userStore = defineStore('user', {
	state: () => {
		return {
			id: '',
			token: '',
			role: '',
			otherInfo: {
				sex: '',
				name: ''
			}
		}
	},
	getters: {},
	actions: {},
	persist: {
		storage: { // 修改存储方式
			getItem: uni.getStorageSync,
			setItem: uni.setStorageSync
		},
		key: 'userInfo', // 本地存储key值
		paths: ['otherInfo.name', 'id'] // 指定持久化的数据，不写默认持久化整个state
	}
})
export {
	userStore
}

更多进阶用法

https://prazdevs.github.io/pinia-plugin-persistedstate/zh/guide/advanced.html

有疑问欢迎在评论区提出，共同探讨