Pinia 是集中状态管理工具

基本用法

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

官方文档：pinia官方文档

找到开始目录，根据文档安装和入门 pinia，启用一个新的终端，输入指令 npm install pinia

输入指令安装 pinia ,安装完毕后 package.js 的 dependencies 中会出现 pinia

安装完成后，我们在 main.js 中，在启动 app 是挂载 pinia

import './assets/main.css'//创建 vue 对象
import { createApp } from 'vue'
import App from './App.vue'
//导入 createPinia
import { createPinia } from 'pinia'
//执行方法得到 pinia 实例
const pinia = createPinia()
//将 pinia 实例放入 app
//createApp(App) 以App作为参数生成一个应用实例对象
//mount('#app') 挂载到 id 为 app 的结点上(即 index.html 的 app id标签上)
createApp(App).use(pinia).mount('#app')

基础使用：

src 下创建 stores 文件夹，文件夹中创能 counter.js 文件：

import { defineStore } from "pinia"
import { ref } from "vue"export const useCounterStore = defineStore('counter',() =>{//定义数据const count = ref(0)//定义数据的修改方法const increment = () => {count.value++}//return 后供组件使用return {count,increment}
})

在 vue 中使用 pinia 实例对象：

<script setup>//导入 use 开头的方法import {useCounterStore} from '@/stores/counter'const counterStore = useCounterStore()console.log(counterStore)
</script><template><div><button @click="counterStore.increment">{{counterStore.count}}</button></div>
</template>

getters 方法和异步 action 

getters 方法需要导入 computed 组件

    //getter 定义const mulGetter = computed(() => count.value * 2)//return 后供组件使用return {count,mulGetter,increment}

<template><div><button @click="counterStore.increment">{{counterStore.count}}</button>{{counterStore.mulGetter}}</div>
</template>

安装 axios ：

异步从后端获取数据：

    //定义异步 actionconst list = ref([])const getList = async () => {//使用一个通用接口测试：geek.itheima.net/v1_0/channelsconst res = await axios.get("http://geek.itheima.net/v1_0/channels")list.value = res}

调用按钮发送请求：

  <div><button @click="counterStore.getList">sentRequest</button>{{counterStore.list}}</div>

观察响应数据的结构：

可以看到数据的层级为 data.data.channels

 故将 list.value 的赋值修改为：

    //定义异步 actionconst list = ref([])const getList = async () => {//使用一个通用接口测试：geek.itheima.net/v1_0/channelsconst res = await axios.get("http://geek.itheima.net/v1_0/channels")list.value = res.data.data.channels}

ul 渲染一下数据：

  <!-- 完善视图 --><br><ul><li v-for="item in counterStore.list" :key="item.id">{{item.name}}</li></ul>

storeToRefs 

使用 storeToRefs 可以辅助保持数据（state+getter）的响应式结构

如以下的结构操作

const {count,mulGetter} = counterStore//响应式丢失，视图不再更新

解决方案：

const {count,mulGetter} = storeToRefs(counterStore)

注意，方法的解构不能添加 storeToRefs() 包裹，应该直接使用 store 对象解构

const {getList} = counterStore