67 - vue3 - Pinia状态管理工具

一. 什么是pinia

Pinia是Vue的最新状态管理工具，是Vuex的替代品

二. 手动添加Pinia到Vue项目

在实际开发项目的时候，关于Pinia的配置，可以在项目创建时自动添加

现在我们初次学习，从零开始:

1. 创建项目

        (1). 使用 Vite 创建一个空的 Vue3 项目

 npm create vue@latest

        (2). 进入项目安装依赖       

cd 项目

npm install

        (3). 创建模板

2. 安装 pinia 到项目中

        (1). 按照官方文档安装pinia     

npm install pinia

        (2). main.js创建实例挂载

import { createApp } from 'vue'
import { createPinia } from 'pinia' // 导包
import App from './App.vue'

const pinia = createPinia() // 创建pinia实例
const app = createApp(App) // 创建根实例
app.use(pinia).mount('#app')

三. Pinia的基本语法

        1. 新建仓库文件夹

        2. 定义仓库,提供数据

import { defineStore } from 'pinia'
import { computed, ref } from 'vue'

// 定义store
// defineStore(仓库唯一标识,()=>{...})
export const useCounterStore = defineStore('counter', () => {
    // 声明数据 state - count
    const count = ref(100)

    // 声明操作数据的方法 action(普通函数)
    const addCount = () => count.value++
    const subCount = () => count.value--

    // 声明基于数据派生的计算属性 getters (computed)
    const double = computed(() => count.value * 2)

    // 声明数据 state - msg
    const msg = ref('hello pinia')

    return {
        count,
        msg,
        addCount,
        subCount,
        double
    }
})

        3. 页面中使用

// Son1Com.vue

<script setup>
// 导入仓库
import {useCounterStore} from '@/store/counter'
const counterStore = useCounterStore()
</script>

<template>
  <div>
    <!-- 直接使用 -->
    我是Son1-{{ counterStore.count }}-{{ counterStore.double }}
    <button @click="counterStore.addCount">+</button>
  </div>
</template>

<style scoped>

</style>

        4. 代码示例

四. Pinia-action异步写法

编写方式: 异步action函数的写法和组件中获取异步数据的写法完全一致

需求: 在Pinia中获取频道列表数据并把数据渲染App组件的模板中

1. 安装axios

npm install axios

2. 定义仓库

// channel.js
import { defineStore } from 'pinia'
import { ref } from 'vue'
import axios from 'axios'

export const useChannelStore = defineStore('channel', () => {
    // 声明数据
    const channelList = ref([])
    // 声明操作数据的方法
    const getList = async () => {
        //支持异步
        const { data: { data } } = await axios.get('http://geek.itheima.net/v1_0/channels')
        channelList.value = data.channels
        console.log(data.channels)
    }

    // 声明getters相关

    return {
        channelList,
        getList
    }
})

3. 页面中调用

<script setup>
// 导入仓库
import {useChannelStore} from '@/store/channel'
const channelStore =useChannelStore()
</script>

<template>
  <div>

    <button @click="channelStore.getList">获取频道数据</button>
    <ul>
      <li v-for="item in channelStore.channelList" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<style scoped>

</style>

4. 代码示例

五.  Pinia- storeToRefs方法

如果想要对仓库中的数据解构,需要使用storeToRefs方法

六. Pinia持久化

1. Pinia的调试

Vue官方的 dev-tools 调试工具对 Pinia直接支持，可以直接进行调试

2. Pinia持久化插件

官方文档: https://prazdevs.github.io/pinia-plugin-persistedstate/zh/

1.安装插件

npm i pinia-plugin-persistedstate

2.main.js 导入

//import { createApp } from 'vue'
//import { createPinia } from 'pinia' // 导包
// 导入持久化插件
import persist from 'pinia-plugin-persistedstate'

//import App from './App.vue'

//const pinia = createPinia() // 创建pinia实例
//const app = createApp(App) // 创建根实例
app.use(pinia.use(persist)) // pinia插件的安装配置
//app.mount('#app')

3.store仓库中开启

// 定义store
// defineStore(仓库唯一标识,()=>{...})
export const useCounterStore = defineStore('counter', () => {
  ...
},{
   // persist:true // 开启当前模块的持久化,仓库内全部持久化
    persist:{
        key: 'ccc-g', // 修改本地存储的唯一表示
        paths:['count'] // 存储的事那些数据
    }
})

4. 代码示例

5. 总结

(1).Pinia是用来做什么的?
        新一代的状态管理工具，替代vuex

(2).pinia中还需要mutation吗?
        不需要，action 既支持同步也支持异步

(3).Pinia如何实现getter?
        computed计算属性函数

(4).pinia产生的Store如何解构赋值数据保持响应式?
        storeToRefs

(5).Pinia 如何快速实现持久化?
        pinia-plugin-persistedstate