介绍Pinia
Pinia 是 Vue.js 的状态管理库，主要用于管理应用程序的全局状态。它是 Vuex 的替代品，提供了更简单和更灵活的 API。Pinia 的主要作用包括：
- 1. 状态管理：Pinia 允许你在应用中集中管理状态，方便不同组件之间共享数据。
- 2. 响应式：Pinia 的状态是响应式的，任何对状态的更改都会自动更新依赖于该状态的组件。
- 3. 模块化：你可以将状态分成多个 store，每个 store 可以管理不同的状态和逻辑，使得代码更清晰和可维护。
- 4. 插件支持：Pinia 支持插件，可以扩展其功能，例如持久化状态、调试等。
- 5. TypeScript 支持：Pinia 对 TypeScript 有良好的支持，提供类型推导和类型检查。
安装 pinia：
yarn add pinia
# 或者使用 npm
npm install pinia具体实现步骤
在main.js里面导入Pinia并创建pinia实例(根 store) 并将其传递给应用：
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'const pinia = createPinia()
const app = createApp(App)app.use(pinia)
app.mount('#app')Store
store介绍
Store：Store 是一个用于管理状态的容器。每个 store 可以看作是一个模块，负责管理特定的状态、计算属性和行为（即方法）
定义store
基本操作
src下新建store文件，里面加上counter.js文件
import { defineStore } from 'pinia'
import { computed, ref } from 'vue'// defineStore('仓库的唯一标识', () => {声明数据state、声明操作数据的方法 action、
// 声明基于数据派生的计算属性 getters。最后return}) // 这本质上定义了一个函数，可以导出
export const useAlertsStore = defineStore('alerts', () => {const count = ref(100)const str = ref("hello pinia")const addcount = () => {count.value++}const double = computed(() => count.value * 2) // 箭头函数单行语句不用return直接返回// const double = computed(() => {count.value * 2}) 如果加了{}就不会返回，要在前面添 // 加一个returnreturn{count,str,addcount,double}
})在APP.vue中使用
<script setup>
import Son01 from '@/components/Son01.vue';
import Son02 from '@/components/Son02.vue';
// 导入 useAlertsStore函数
import {useAlertsStore} from '@/store/counter'
const tore = useAlertsStore()
console.log(tore);</script>
<template><div>{{ tore.count }}的两倍为 {{ tore.double }}</div><button @click="tore.addcount">+</button><div>{{ tore.str }}</div><h1>这是在app.vue组件中</h1><Son01></Son01><Son02></Son02>
</template><style scoped></style>
注意不能随意解构tore：const { count, msg } = tore数据就会丢失响应式
以下是tore对象
store的解构
如果是解构属性就用storeToRefs，解构方法就直接解构，解构的目的就是为了简化xxx.xxx的方式来调用属性或方法
<script setup>
import { storeToRefs } from 'pinia'
const store = useCounterStore()// `name` 和 `doubleCount` 是响应式的 ref
const { name, doubleCount } = storeToRefs(store)// 作为 action 的 increment 可以直接解构
const { increment } = store
</script>action异步写法
下载axios
npm add axios
import { defineStore } from "pinia";
import axios from "axios";
import { ref } from "vue";
export const useChannelStore = defineStore('channel', () => {const channellist = ref([])const getlist = async () => {const {data:{data:{channels : uname}}} = await axios.get('http://geek.itheima.net/v1_0/channels')// 解构时传给的变量unameconsole.log(uname);channellist.value = uname; }return {channellist,getlist}
})app.vue中导入
<script setup>
// 导入channel
import {useChannelStore} from '@/store/channel'
const ChannelStore = useChannelStore()</script><template><button @click="ChannelStore.getlist">点击</button><ul><li v-for="item in ChannelStore.channellist" :key="item.id">{{ item.name }}</li></ul>
</template><style scoped></style>
持久化处理
参考文档链接
下载pinia-plugin-persistedstate插件
npm i pinia-plugin-persistedstate在main.js里面将插件添加到pinia 实例中：
import { createApp } from 'vue'
import { createPinia } from 'pinia'// 导入持久化插件
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'import App from './App.vue'const pinia = createPinia()
const app = createApp(App)app.use(pinia.use(piniaPluginPersistedstate)) // 添加持久化插件
app.mount('#app') 在声明的store里面，设置新选项 ：{persist:true}
import { defineStore } from 'pinia'
import { ref } from 'vue'export const useStore = defineStore('main',() => {const someState = ref('hello pinia')return { someState }},{persist: true,},
)配置完以上，在页面里点击刷新，页面内容都不变
