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>