# Pinia 介绍
# 什么是 Pinia
Pinia 是 Vue 的最新的状态管理工具，是 Vuex 的替代品
- 提供了更加简单的 API
- 提供符合，组合式风格 API
- 去掉了 modules 的概念，每一个 store 都是一个独立的模块
- 配合 TypeScript 更加友好，提供可靠的类型推断
# 添加 Pinia 到 Vue 项目
# 使用 Vite 创建空 Vue3 项目
# 安装 Pinia
# 修改 main.js 文件
| 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') |
# Pinia 的基本语法
# store 文件夹下创建 counter.js 文件
| import { defineStore } from 'pinia' |
| import { ref } from 'vue' |
| |
| |
| export const useCounterStore = defineStore('counter', () => { |
| |
| const count = ref(0) |
| |
| const addCount = () => count.value++ |
| const subCount = () => count.value-- |
| |
| const double = computed(() => count.value * 2) |
| |
| const msg = ref('hello pinia') |
| return { |
| count, |
| double, |
| addCount, |
| subCount, |
| msg |
| } |
| }) |
# 在 App 根组件中导入
| <script setup> |
| import { useCounterStore } from '@/store/counter.js' |
| const counterStore = useCounterStore() |
| </script> |
| <template> |
| <div> |
| <button @click="counterStore.addCount">+</button> |
| </div> |
| </template> |
| <style scoped> |
| </style> |
![image-20230906091511005]()
# action 异步写法
# action 异步实现
- 编写方式：异步 action 函数的写法和组件中获取异步数据的写法完全一致
# 在 store 下创建 channel.js 文件
| import { defineStore } from 'pinia' |
| import { ref } from 'vue' |
| import axios from 'axios' |
| export const useChannelStore = defineStore('channel', () => { |
| |
| const channelList = ref([]) |
| |
| const getList = async () => { |
| |
| const { data: { data }} = awati axios.get('http://xxx.xxx/xxx') |
| channelList.value = data.channels |
| } |
| |
| |
| return { |
| channelList, |
| getList |
| } |
| }) |
# 在 App 根组件中引入
![image-20230906093315974]()
# Pinia-storeToRefs 方法
| <script setup> |
| import { storeToRefs } from 'pinia' |
| import { useCounterStore } from '@/store/counter' |
| const counterStore = useCounterStore() |
| |
| const { count, msg } = storeToRefs(counterStore) |
| </script> |
# Pinia 持久化
# Pinia 持久化插件
# 安装插件 pinia-plugin-persistedstate
| npm i pinia-plugin-persistedstate |
# main.js 使用
| import { createApp } from 'vue' |
| import { createPinia } from 'pinia' |
| |
| import persist from 'pinia-plugin-persistedstate' |
| import App from './App.vue' |
| const pinia = createPinia() |
| const app = createApp(App) |
| app.use(pinia.use(persist)) |
| app.mount('#app') |
# 设置 store 仓库
persist: true ：开启
| import { defineStore } from 'pinia' |
| import { ref } from 'vue' |
| import axios from 'axios' |
| export const useChannelStore = defineStore('channel', () => { |
| |
| const channelList = ref([]) |
| |
| const getList = async () => { |
| |
| const { data: { data }} = awati axios.get('http://xxx.xxx/xxx') |
| channelList.value = data.channels |
| } |
| |
| |
| return { |
| channelList, |
| getList |
| } |
| }, { |
| persist: true |
| }) |
设置 localStorage 中的 key 值
| import { defineStore } from 'pinia' |
| import { ref } from 'vue' |
| import axios from 'axios' |
| export const useChannelStore = defineStore('channel', () => { |
| |
| const channelList = ref([]) |
| |
| const getList = async () => { |
| |
| const { data: { data }} = awati axios.get('http://xxx.xxx/xxx') |
| channelList.value = data.channels |
| } |
| |
| |
| return { |
| channelList, |
| getList |
| } |
| }, { |
| persist: { |
| key: "mykey", |
| } |
| }) |
