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
)
