Pinia 添加到项目
Pinia 是 vue 的专属的最新状态管理库，是Vuex状态管理工具的替代品
- 提供更加简单的API （去掉了 mutation）
- 提供符合组合式风格的API
- 去掉 modules 的概念，每一 store 都是一个独立的模块
- 搭配 TypeScript 一起使用提供可靠的类型推断
安装
npm install pinia
在main.js中配置
import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
// 1. 导入 createPinia
import { createPinia} from 'pinia'
//2. 执行方法得到实例
const pinia = createPinia()
// 3.把 pinia 实例加入到APP应用中
createApp(App).use(pinia).mount('#app')
pinia-counter 基础使用
- 定义Store(state + action)
// stores/counter.js
import { defineStore } from 'pinia'
import { ref } from 'vue'
export const useCounterStore = defineStore('counter', () => {
// 数据 （state）
const count = ref(0)
//修改数据的方法（action）
const increment = () => {
count.value++
}
//以对象形式返回
return { count, increment }
})
- 组件使用Store
<script setup>
// 1. 导入 useCounterStore 方法
import { useCounterStore } from '@/stores/counter'
// 2. 执行方法得到 counter 对象
const counterStore = useCounterStore()
</script>
getters 实现
pinia 中 getters 直接使用 computed 函数 进行模拟
// getter 定义
const doubleCount = computed(() => {
return count.value * 2
})
action 实现异步
action 实现异步和组件中定义数据和方法的风格完全一致
npm install axios
// stores/counter.js
import axios from 'axios'
//异步 action 定义
const list = ref([])
const API_URL = 'http://geek.itheima.net/v1_0/channels'
const getList = async() => {
const res = await axios.get(API_URL)
list.value = res.data.data.channels
}
// 组件使用
onMounted(() => {
counterStore.getList()
})
storeToRefs
使用 storeToRefs 函数可以辅助保持数据（state + getter ）的响应式解构
//直接解构赋值（响应式丢失,数据不会自动更新）
const { count, doubleCount } = counterStore
应该使用storeToRefs 函数包裹
import {storeToRefs} from 'pinia'
//数据
const { count, doubleCount } = storeToRefs(counterStore)
//方法直接从原来的 counterStore 中解构赋值
const { increment } = counterStore
案例全码
//stores/counter.js
// 导入方法 defineStore
import { defineStore } from "pinia"
import { computed, ref } from 'vue'
import axios from 'axios'
export const useCounterStore = defineStore('counter',() => {
// 定义数据state
const count = ref(0)
// 定义修改数据的方法 action 同步 + 异步
const increment = () => {
count.value++
}
// getter 定义
const doubleCount = computed(() => {
return count.value * 2
})
//异步 action 定义
const list = ref([])
const API_URL = 'http://geek.itheima.net/v1_0/channels'
const getList = async() => {
const res = await axios.get(API_URL)
list.value = res.data.data.channels
}
// 以对象方式return供组件使用
return {
count,
increment,
doubleCount,
list,
getList,
}
})
<script setup>
import { onMounted } from 'vue'
// 1.导入 use 打头方法
import { useCounterStore } from '@/stores/counter'
import {storeToRefs} from 'pinia'
// 2. 执行方法得到store实例对象
const counterStore = useCounterStore()
console.log(counterStore)
const {count,doubleCount} = storeToRefs(counterStore)
onMounted(() => {
counterStore.getList()
})
</script>
<template>
<div>
<button @click="counterStore.increment">{{ counterStore.count }}</button>
双倍：{{ counterStore.doubleCount }}
解构值{{count}}和{{doubleCount}}
<div v-for="(item,i) in counterStore.list" :key="i">{{ item.name }}</div>
</div>
</template>
