黑马前端Vue新一代状态管理插件Pinia快速入门视频教程
Pinia主页
超级简单，不需要耐心
pinia ：新一代的VueX
1. 安装
npm install pinia
2. 在main.js中引入
import { createPinia } from 'pinia'
app.use(createPinia())
3. 新建stores目录，新建.js文件
pinia的使用和在setup中写的代码基本一致，记得`ruturn`数据就行
// path:@/stores/counter.js
import {computed, ref} from "vue";
import {defineStore} from 'pinia'
// 第一个参数是 store 的唯一标识id
export const useCounterStore = defineStore('counter',()=>{// VueX：state，数据const count = ref(0)// VueX：getters，计算属性const doubleCount = computed(() => count.value * 2)// VueX：actions + mutations，方法function increment(){count.value++}return { count, doubleCount, increment }
})
4. 使用
在vue中导入pinia后需要**赋值操作**，然后使用`.`来访问pinai中的数据和方法
App.vue
<template>计数器：{{countStore.count}}<br>加倍计数器：{{countStore.doubleCount}}<br><button @click="countStore.increment">点我加1</button>
</template><script setup>
// 引入stroe文件
import {useCounterStore} from "@/stores/counter"
const countStore = useCounterStore()
</script>
5. 另一种使用方式，对store解构，不使用countStore.去访问store中的数据和方法
<template>计数器：{{count}}<br>加倍计数器：{{doubleCount}}<br><button @click="increment">点我加1</button>
</template><script setup>
import {useCounterStore} from "@/stores/counter"
import {storeToRefs} from "pinia";
// 得到store的实例对象
const countStore = useCounterStore()
// 对state的解构需要使用storeToRefs方法
const { count, doubleCount } = storeToRefs(countStore)
// 对action的结构，直接干
const {increment} = countStore
</script>
pinia-plugin-persistedstate ： 数据持久化
视频
主页
1. 安装
npm : npm i pinia-plugin-persistedstate
2. main.js中pinia使用插件
import { createApp } from 'vue'
import App from './App.vue'import { createPinia} from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'const pinia = createPinia() // 创建pinia实例
pinia.use(piniaPluginPersistedstate) // pinia使用持久化插件
createApp(App).use(pinia).mount('#app')3. 最简单粗暴的用法，将state数据保存在localstorage（关闭浏览器数据清空）
查看保存在localstorage中的结果
4. 保存到session storage中（session storage关闭页面丢失数据）
只需要给persist加个对象，paths中是要保存的数据的名字
persist: {storage: sessionStorage,paths:['count']}
什么是持久化？
1. 非持久化
2. 持久化
