Vue3中使用pinia
安装依赖
yarn add pinia
//下面这个取决你需不需要数据持久化安装
yarn add pinia-plugin-persist
挂载
import {
createPinia} from "pinia";
//数据持久化
import piniaPersist from 'pinia-plugin-persist'
const pinia = createPinia();
pinia.use(piniaPersist);
app.use(pinia);
开始
在src目录下创建store文件夹,然后创建index.ts文件
import {
defineStore } from "pinia"
/**
* 这个 第一个参数main，也称为 id，是必要的，Pinia 使用它来将 store 连接到 devtools。
* 将返回的函数命名为use...（更好的语义化） 是跨可组合项的约定，以使其符合你的使用习惯。
*/
export const useStore = defineStore('main', {
state: () => {
return {
systemName:'XX管理系统'
}
},
/**
* 用来封装计算属性 有缓存功能 类似于computed
*/
getters: {
getSystemName(state){
return `我是一个${
state.systemName}`
}
//或者不使用state传递参数直接使用this
//getNum(){
// return `我是一个计数器${this.count}`
// }
},
/**
* 编辑业务逻辑 类似于methods
*/
actions: {
changeState(){
this.systemName = 'xx管理系统';
}
},persist: {
enabled: true, // 开启数据缓存
strategies: [
{
key: 'name',//存储key值
storage: localStorage, // 默认是sessionStorage
paths: ['systemName'] //指定字段存储数据
}
],
}
})
使用-js
<script>
import {
useStore} from "@/store";
import {
storeToRefs} from 'pinia';
export default {
name: "TopLayout",
setup(){
const store = useStore();
// 如果不想使用stroe.可以使用解构，但使用解构会使其失去响应式，这时候可以用 pinia 的提供的 storeToRefs
// 通过storeToRefs解构出来的可以响应式
const {
systemName} = storeToRefs(store);
//替换Store整个状态
store.$state = {
systemName:'Mars管理系统后台' };
// 修改store数据
store.systemName = "Mars的一小步,人类的一大步"
// 除了直接用 store.systemName 修改 store，你还可以调用 $patch 方法。 它允许您使用部分“state”对象同时应用多个更改：
store.$patch({
systemName:"小小的Mars,大大的牛批"
})
// $patch 方法也接受一个函数来批量修改集合内部分对象的情况
store.$patch((state)=>{
state.systemName="来自火星的Mars战神"
})
// 通过action修改
store.changeState();
// Pinia中的 getters 与vue中的getter同为计算属性，具有缓存性，如果getters中的属性值未发生变化，多次调用只执行一次
// 语法:return出store在html标签中直接使用store.getSystemName
return{
systemName,
store
}
}
}
</script>
template
<h1>{
{
getSystemName }}</h1>
<h1>{
{
store.systemName }}</h1>
<h1>{
{
store.getSystemName }}</h1>
总结
pinia它没有mutation,他只有state，getters，action【同步、异步】使用他来修改state数据
每个store都是独立的可以相互作用也可以独立使用,非常灵活.