vue系列=状态管理=Pinia使用

1、Pinia基本概念

1、Pinia向外暴露了几个重要的函数，分别是createPinia、defineStore和storeToRefs

2、pinia有五个核心管理概念：

        store、store、getters、action、plugins

2、Pinia基本使用

1、安装过程

1、安装pinia插件：npm install pinia --save//在main。js中引入，需要调用createPinia()方法将pinia实例化，然后挂载到vue实例上就可以了
2、// 创建pinia状态管理库
import { createPinia } from 'pinia'
const pinia = createPinia()app.use(pinia)

2、简单使用。

defineStore函数用来创建生成store对象的函数，它接收两个参数：第1个参数是store对象的唯一标识，必须保证多个不同的store对象的标识是唯一的；第2个参数是配置对象，基本配置包括state、getters和actions。Pinia要求state配置对象必须是返回state对象的箭头函数，getters是包含多个计算属性的对象，而actions是包含多个action方法的对象。

  2、创建store文件夹，并在其中创建index.js文件，内容如下：需要指定唯一的标识符，这里使用useStore作为标识符：import { defineStore } from 'pinia'export const useStore = defineStore('main', {state: () => ({count: 0}),getters: {doubleCount: (state) => state.count * 2},actions: {increment(state) {state.count++}}})

3、持久化

1、store中的数据，刷新页面后就丢失了，如果想保留这些数据，就要用到数据持久化了。

推荐使用pinia-plugin-persistedstate

2、安装插件

 npm install pinia-plugin-persistedstate

3、引入持久化插件

在mai.js// 创建pinia状态管理库
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'const pinia = createPinia()
// 引用插件
pinia.use(piniaPluginPersistedstate)

4、开启持久化数据

最后对要实现状态数据持久化的Pinia模块进行持久化的开启配置，比如我们要对计数器模块的count进行持久化处理，只需在counter.js文件中添加persist为true的配置即可。

4、举个例子

1、在store中定义一个一个counter.js文件

const useCounterStore = defineStore('counter', {state: () => ({count: 0,countList: []}),actions: {increment(num) {this.count++;this.countList.push(this.count);},decrement(num) {this.count--;this.countList.push(this.count);},reset() {this.count = 0;this.countList = [];},save() {localStorage.setItem('count', JSON.stringify(this.count));localStorage.setItem('countList', JSON.stringify(this.countList));},},getters: {showCount: (state) => state.count,showCountList: (state) => state.countList,},persist: true,
});export default useCounterStore;

2、在vue组件中使用

<template>
<div>{{ store.count }}
</div>
<div>{{store.showCount}}
</div><div>{{store.countList}}</div><el-button @click="store.increment">+</el-button><el-button @click="store.decrement">-</el-button><el-button @click="store.reset">异步+</el-button>
</template>
<script setup>import useCounterStore from "@/storespinia/counter";
const store = useCounterStore();</script>

5、模块汇总化

1、其中pinia中可以自己归类于一个模块，可以互相不影响，但是也可以通过模块化将相关的模块归集在一起，进行模块的处理化

2、新建立一个index.js

// 统一导出userstore模块
import useCounterStore from "@/storespinia/counter.js";
import userStoreLogin from "@/storespinia/user.js";export default function userStore() {return {counter:useCounterStore(),userLogin:userStoreLogin(),}
}

3、引用模块化

<div>{{ ddd.count }}
</div>
<div>{{ddd.showCount}}
</div><el-button @click="ddd.increment">+</el-button><el-button @click="ddd.decrement">-</el-button><el-button @click="ddd.reset">异步+</el-button><el-button @click="ddd.double">同步+</el-button></template>
<script setup>import userStore from "@/storespinia/index";const store = userStore();
const ddd = store.counter;</script>