Vue3中的Pinia——管理应用程序的全局状态
介绍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}) 如果加了{}就不会返回，要在前面添
// 加一个return
return{
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')
// 解构时传给的变量uname
console.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,
},
)配置完以上，在页面里点击刷新，页面内容都不变
原文地址：https://blog.csdn.net/2301_80412275/article/details/142308310
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！