pinia基础知识
一、定义
Pinia.js 是新一代的状态管理器，由 Vue.js团队中成员所开发的，因此也被认为是下一代的 Vuex，即 Vuex5.x，在 Vue3.0 的项目中使用也是备受推崇。
Pinia的成功可以归功于其管理存储数据的独特功能(可扩展性、存储模块组织、状态变化分组、多存储创建等)。
Pinia.js 有如下特点：
- 完整的 typescript 的支持；
- 足够轻量，压缩后的体积只有1.6kb;
- 去除 mutations，只有 state，getters，actions（这是我最喜欢的一个特点）；
- actions 支持同步和异步；
- 没有模块嵌套，只有 store 的概念，store 之间可以自由使用，更好的代码分割；
- 无需手动添加 store，store 一旦创建便会自动添加；
二、Pinia 核心特性
- Pinia 没有 Mutations
- Actions 支持同步和异步
- 没有模块的嵌套结构
- Pinia 通过设计提供扁平结构，就是说每个 store 都是互相独立的，谁也不属于谁，也就是扁平化了，更好的代码分割且没有命名空间。当然你也可以通过在一个模块中导入另一个模块来隐式嵌套 store，甚至可以拥有 store 的循环依赖关系
- 更好的 TypeScript 支持
- 不需要再创建自定义的复杂包装器来支持 TypeScript 所有内容都类型化，并且 API 的设计方式也尽可能的使用 TS 类型推断
- 不需要注入、导入函数、调用它们，享受自动补全，让我们开发更加方便
- 无需手动添加 store，它的模块默认情况下创建就自动注册的
- Vue2 和 Vue3 都支持
- 除了初始化安装和SSR配置之外，两者使用上的API都是相同的
- 支持 Vue DevTools
- 跟踪 actions, mutations 的时间线
- 在使用了模块的组件中就可以观察到模块本身
- 支持 time-travel 更容易调试
- 在 Vue2 中 Pinia 会使用 Vuex 的所有接口，所以它俩不能一起使用
- 但是针对 Vue3 的调试工具支持还不够完美，比如还没有 time-travel 功能
- 模块热更新
- 无需重新加载页面就可以修改模块
- 热更新的时候会保持任何现有状态
- 支持使用插件扩展 Pinia 功能
- 支持服务端渲染
三、使用
- 安装
npm install pinia --save
- 引用
- 新建 src/store 目录并在其下面创建 index.ts，导出 store
/**
* pinia 创建
*/
import { createPinia } from 'pinia'
const store = createPinia()
export default store
- 在 main.ts 中引入并全局使用
import { createApp } from 'vue'
import App from './App.vue'
//引入pinia
import store from './store'
const app = createApp(App)
app.use(store)
四、state、getters、actions
use开头命名
- 在 src/store 下面创建一个useUsers.ts
import { defineStore } from 'pinia'
export const useUsersStore = defineStore({
id: 'user', // id必填，且需要唯一
//数据仓库State 箭头函数 返回一个对象 在对象里面定义值
state: () => {
return {
name: '张三',
arr: ["名侦探柯南", "海贼王", "死神", "火影忍者"],
num: 5
}
},
//类似于computed 封装计算属性，它有缓存的功能
getters: {
getNum: (state) => state.num = state.num * 5
},
//methods 支持同步和异步 就是用来封装业务逻辑，修改 state
actions: {
getStore() {
console.log(this.name + "66666");
}
},
})
defineStore 接收两个参数：
第一个参数就是模块的名称，必须是唯一的，多个模块不能重名，Pinia 会把所有的模块都挂载到根容器上
第二个参数是一个对象
- 其中 state 用来存储全局状态，它必须是箭头函数，为了在服务端渲染的时候避免交叉请求导致的数据状态污染所以只能是函数，而必须用箭头函数则为了更好的 TS 类型推导
- getters 就是用来封装计算属性，它有缓存的功能
- actions 就是用来封装业务逻辑，修改 state，需要注意的是不能用箭头函数定义 actions，不然就会绑定外部的 this 了
- 组件使用
<template>
<!-- 直接用 -->
{{ useStores.name }}
{{ useStores.getNum }}
<el-button type="primary" size="default" @click="handleSetState"
>点击stores里面的值</el-button
>
</template>
<script>
import { defineComponent } from "vue";
import { useUsersStore } from "@/store/modules/useUsers";
export default defineComponent({
setup() {
//调用
const useStores = useUsersStore();
//使用actions函数
useStores.getStore();
let handleSetState = () => {
//改变他state里面的值
useStores.name = "隔壁老王";
};
return {
handleSetState,
useStores,
};
},
});
</script>
state 也可以使用解构，但使用解构会使其失去响应式，这时候可以用 pinia 的 storeToRefs。
import { storeToRefs } from 'pinia'
const { name } = storeToRefs(useUsersStore())
- 修改state
useStores.name="王五"
但一般不建议这么做，建议通过 actions 去修改 state，action 里可以直接通过 this 访问。
import { defineStore } from 'pinia'
export const useUsersStore = defineStore({
id: 'user', // id必填，且需要唯一
state: () => {
return {
name: '张三',
arr: ["名侦探柯南", "海贼王", "死神", "火影忍者"],
num: 5
}
},
//methods 支持同步和异步
actions: {
setStore(val: string) {
this.name = val
}
},
})
-------------------------------------------------------------------
<template>
<!-- 直接用 -->
{{ useStores.name }}
<el-button type="primary" size="default" @click="handleSetState"
>点击stores里面的值</el-button
>
</template>
<script>
import { defineComponent } from "vue";
import { useUsersStore } from "@/store/modules/useUsers";
export default defineComponent({
setup() {
//调用
const useStores = useUsersStore();
let handleSetState = () => {
//使用actions函数,改变state的name值
useStores.setStore("李四");
};
return {
handleSetState,
useStores,
};
},
});
</script>
- getters
useStores.getNum
- actions
需要注意的是不能用箭头函数定义 actions，不然就会绑定外部的 this 了
- action 可以像写一个简单的函数一样支持 async/await 的语法，让你愉快的应付异步处理的场景。
actions: {
async getgood(){
//xxx是请求函数
let result = await xxxx()
return result
}
}
- action 间的相互调用，直接用 this 访问即可。
actions: {
async getgood(){
//xxx是请求函数
let result = await xxxx()
this.getResult(result)// 调用另一个 action 的方法
return result
},
getResult(val){
console.log(val)
}
}
- 在 action 里调用其他 store 里的 action 也比较简单，引入对应的 store 后即可访问其内部的方法了。
//user.ts
import { useAStore } from './a'
actions: {
getData(){
useAStore.setData("哈哈哈")// 调用 a store 里的 action 方法
}
}
--------------------------------
//b.ts
export const useAStore = defineStore({
id: 'app',
actions: {
setData(data) {
console.log(data)
}
}
})
五、数据持久化
pinia也是和vuex有一个缺点，就是刷新后会丢失数据。
插件 pinia-plugin-persist 可以辅助实现数据持久化功能。
- 安装
npm i pinia-plugin-persist --save
- 使用
// src/store/index.ts
/**
* pinia 创建
*/
import { createPinia } from 'pinia'
//刷新数据丢失问题
import piniaPluginPersist from 'pinia-plugin-persist'
const store = createPinia()
store.use(piniaPluginPersist)
export default store
- 在每个模块里开启 persist 即可
export const useUserStore = defineStore({
id: 'user',
state: () => {
return {
name: '张三',
arr: ["名侦探柯南", "海贼王", "死神", "火影忍者"],
num: 5
}
},
// 开启数据缓存
persist: {
enabled: true
}
})
数据默认存在 sessionStorage 里，并且会以 store 的 id 作为 key。
- 自定义 key 以及修改存储方式（不建议使用）
persist: {
enabled: true,
strategies: [
{
key: 'my_user',//不会以 store 的 id 作为 key，而是以my_user作为key
storage: localStorage,//sessionStorage 变成 localStorage 方式
}
]
}
- 持久化部分 state
默认所有 state 都会进行缓存，你可以通过 paths 指定要持久化的字段，其他的则不会进行持久化。
export const useUserStore = defineStore({
id: 'user',
state: () => {
return {
name: '张三',
arr: ["名侦探柯南", "海贼王", "死神", "火影忍者"],
num: 5
}
},
// 开启数据缓存
persist: {
enabled: true,
strategies: [
{
storage: localStorage,
paths: ['name', 'num']
}
]
}
})
上面我们只持久化 name 和 num，并将其改为localStorage, 而 arr不会被持久化，如果其状态发送更改，页面刷新时将会丢失，重新回到初始状态，而 name 和 num 则不会。