使用前说明：
当前demo使用了vue3 + vite + typescript + pinia搭建的简单项目，主要介绍了在单文件组件（sfc）基础上使用pinia的用法，懒得看api的兄弟们，来这瞅瞅直接用。
安装：
yarn add pinia (yarn包管理器)
npm install pinia (npm包管理器)
介绍：
其实就是一个全局状态管理的对象，它托管全局状态。相对vuex来讲，它仅有三个概念state、getters、actions，可以假设为组件中的数据源、计算和方法。当然，如果是特别小型的单页应用程序中，直接通过export const state = reactive({})即可，完全符合需求。
使用：
1、在整个项目中引入pinia
import { createPinia } from 'pinia'
app.use(createPinia())
2、定义store对象
import { defineStore } from 'pinia'
// 仓库名称在命名时推荐使用use开头的名称，命名为 use... 是跨可组合项的约定，当然不遵守约定也行，只要你开心就好。
// defineStore函数接受的第一个参数是定义该仓库的id,具有唯一性，pinia使用它将store连接到devtools。第二个参数为一个对象，里面包含各种选项信息,如下
export const useStore = defineStore('main', {
// other options...
})
// defineStore函数接受的第二个参数也可以是一个回调函数，它允许你自定义仓库信息
// 推荐在不同的文件中定义不同的store
import { reactive } from 'vue'
export const useStore = defineStore('main', () => {
const state = reactive({
name: 'niu',
age: 18
})
const increatment = (param: any) => {
let params = param || state
state.age++
}
return {
state,
increatment
}
}
)
3、使用store对象
// 假设定义store对象的时候，该对象的文件路径为src/store/index.ts，并且src/已经在vite.config.ts和tsconfig.json文件中配置为@ <script setup lang="ts"> // 引入定义store对象的文件 import { useStore } from '@/store' // 这个时候会返回整个store实例以在模板中使用它，这个时候就可以在store上直接访问state、getters、actions中定义的任何属性和方法。注意：不要对store进行解构，它会破坏响应式 const store = useStore() </script>
4、state，即数据源
- 定义state对象
// 定义state的形式比较多，我选择行数最少的 export const useStore = defineStore('main', { // 第一种 state () { return {
name: 'hello' // 需要保存的数据源 } } // 第二种（经常使用的） state: () => ({
name: 'hello' // 需要保存的数据源 }), // 第三种 state: () => { return {
name: 'hello' // 需要保存的数据源 } }, }) -
state对象的获取
<script setup lang="ts"> import { useStore } from '@/store' const store = useStore(); // 获取state中的对象,直接取值即可 const name = store.name </script>
- state对象的重置
<script setup lang="ts"> import { useStore } from '@/store' const store = useStore(); // 重置仓库对象至初始值 store.$reset() </script>
-
state对象的修改
- direct，即直接修改
<script setup lang="ts"> import { useStore } from '@/store' const store = useStore(); // 直接修改 store.name = 'world' </script>
- patch object，即通过$patch接受对象的方式修改
<script setup lang="ts"> import { useStore } from '@/store' const store = useStore(); // store提供$patch方法，接受对象作为参数更新store对象 store.$patch({ name: 'world', }) </script>
- patch function，即通过$patch接受函数的方式修改
<script setup lang="ts"> import { useStore } from '@/store' const store = useStore(); // store提供$patch方法，接收函数作为参数更新store对象，接收的函数形参第一个默认为数据源state对象 store.$patch((state: any) => { state.name = 'world'; }) </script>
-
整体替换
<script setup lang="ts"> import { useStore } from '@/store' const store = useStore(); // 全部替换store对象 store.$state = { name: 'world' } </script>
- 订阅状态
<script setup lang="ts"> import { useStore } from '@/store' const store = useStore(); // 订阅,只会在 patches 之后触发一次 // 默认情况下，state subscriptions 绑定到添加它们的组件（如果 store 位于组件的 setup() 中）。 意思是，当组件被卸载时，它们将被自动删除。 如果要在卸载组件后保留它们，请将 { detached: true } 作为第二个参数传递给 detach 当前组件的 state subscription： store.$subscribe((mutation, state) => { // import { MutationType } from 'pinia' mutation.type // 'direct' | 'patch object' | 'patch function' // 与 store.$id 相同 mutation.storeId // 'main' // 仅适用于 mutation.type === 'patch object' mutation.payload // 补丁对象传递给 to store.$patch() // 每当它发生变化时，将整个状态持久化到本地存储。detached属性为true时，意味着组件卸载后需要保留store,默认为自动删除 localStorage.setItem('store', JSON.stringify(state)) }, { detached: true }) </script>
- direct，即直接修改
5、getters
- 定义getters对象
export const useSomeStore = defineStore('second', { state: () => ({ number: 2 }), getters: { // getters下的所有方法默认第一个参数为数据源，主要是依赖state对象做一些计算操作 doubleNumber(state) { return state.number * 2 }, // 该方法依赖getters下的doubleNumber方法，使用this指向当前store实例对象 fourNumber(): number { return this.doubleNumber * 2 }, // 在调用getters下该方法时可以传递自定义参数信息，如下的num形参 customNumber(state) { return (num: number) => state.number * num }, } }) - 使用getters对象下的方法
<script setup lang="ts"> import { useSomeStore } from '@/store' const someStore = useSomeStore(); // 有参数时 someStore.customNumber(2) // 无参数时 someStore.doubleNumber() someStore.fourNumber() </script>
6、actions
- 定义actions对象
export const useSomeStore = defineStore('second', { state: () => ({ number: 2 }), getters: { // getters下的所有方法默认第一个参数为数据源，主要是依赖state对象做一些计算操作 doubleNumber(state) { return state.number * 2 }, // 该方法依赖getters下的doubleNumber方法，使用this指向当前store实例对象 fourNumber(): number { return this.doubleNumber * 2 }, // 在调用getters下该方法时可以传递自定义参数信息，如下的num形参 customNumber(state) { return (num: number) => state.number * num }, }， // 最主要的是actions 可以是异步的 actions: { addNumber() { this.number++ } } }) - 使用actions对象下的方法
<script setup lang="ts"> import { useSomeStore } from '@/store' const someStore = useSomeStore(); // 使用 someStore.addNumber() </script>
- 订阅actions
// 这个直接看官网描述，哈哈，写的疲惫了 const unsubscribe = someStore.$onAction( ({ name, // action 的名字 store, // store 实例 args, // 调用这个 action 的参数 after, // 在这个 action 执行完毕之后，执行这个函数 onError, // 在这个 action 抛出异常的时候，执行这个函数 }) => { // 记录开始的时间变量 const startTime = Date.now() // 这将在 `store` 上的操作执行之前触发 console.log(`Start "${name}" with params [${args.join(', ')}].`) // 如果 action 成功并且完全运行后，after 将触发。 // 它将等待任何返回的 promise after((result) => { console.log( `Finished "${name}" after ${ Date.now() - startTime }ms.\nResult: ${result}.` ) }) // 如果 action 抛出或返回 Promise.reject ，onError 将触发 onError((error) => { console.warn( `Failed "${name}" after ${Date.now() - startTime}ms.\nError: ${error}.` ) }) } ) // 手动移除订阅 unsubscribe()
持久化存储：
- 下载pinia-plugin-persist插件
- 在pinia中扩展该插件
import { createPinia } from 'pinia' import piniaPluginPersist from 'pinia-plugin-persist' const store = createPinia(); store.use(piniaPluginPersist) app.use(store) - 在选项中进行配置
// 开启数据持久化 export const usrCustomStore = defineStore('custom', { persist: true // 默认所有选项 }) export const usrCustomStore = defineStore('custom', { persist: { enabled: true, // 开启持久化存储 strategies: [ { // 修改存储中使用的键名称，默认为当前 Store的id key: 'custom', // 修改为 sessionStorage，默认为 localStorage storage: sessionStorage, // []意味着没有状态被持久化(默认为undefined，持久化整个状态) paths: [], } ] } })
总结：
上面的代码有些是手敲上去的，直接复制粘贴可能会报错哈，小心小心！！！
