1.什么是pinia
Pinia是Vue的专属的最新的状态管理库,是Vuex状态管理工具的替代品
1.提供了更加简单的API(去掉了mutation)
2.提供符合组合式风格的API(和Vue3新语法统一)
3.去掉了modules的概念,每一个store都是一个独立的模块
4.搭配TypeScript一起使用提供可靠的类型判断
2.添加pinia到vue项目
//下载pinia
npm install pinia
//1.导入createPinia
import {createPinia} from 'pinia'
//2.执行方法得到实例
const pinia = createPinia()
//3.把pinia实例加入到app应用中
createApp(App).use(pinia).mount('#app')
3.store
store (如 Pinia) 是一个保存状态和业务逻辑的实体,它并不与你的组件树绑定。换句话说,它承载着全局状态。它有点像一个永远存在的组件,每个组件都可以读取和写入它。它有三个概念,state、getter 和 action,我们可以假设这些概念相当于组件中的 data、 computed 和 methods。
(1)定义store
//导入一个方法defineStore
import {defineStore} from 'pinia'
import {ref} from 'vue'
export const useCountStore = defineStore('counter',()=>{
//定义数据state
const count = ref(0)
//定义修改数据的方法(action 同步+异步)
const increment = () => {
count.value++
}
//getter定义
const doubleCount = computed(()=> count.value*2)
//定义异步action
const list = ref([])
const getList = async() => {
const res = await axios.get(API_URL)
list.value = res.data.data.channels
}
//以对象方式return供组件使用
return {
count,
increment
)
(2)使用store
<script setup>
//1.导入use打头的方法
import {useCounterStore} from '@/stores/counter'
//2.执行方法得到store实例对象
const counterStore = useCounterStore()
onMounted(()=>{
counterStore.getList()
})
</script>
<template>
<button @click='counterStore.increment'>{{counterStore.count}}</button>
{{counterStore.doubleCount}}
<ul>
<li v-for='item in counterStore.list' :key='item.id'>{{item.name}}</li>
<ul>
</template>
3. storeToRefs
<script setup>
//1.导入use打头的方法
import {useCounterStore} from '@/stores/counter'
import {storeToRefs} from 'vue'
//2.执行方法得到store实例对象
const counterStore = useCounterStore()
//方法包裹(保持响应式更新)
const {count,doubleCount} = storeToRefs(counterStore)
//方法直接从原来的counterStore中解构赋值
const {increment} = counterStore
onMounted(()=>{
counterStore.getList()
})
</script>
<template>
<button @click='increment'>{{count}}</button>
{{doubleCount}}
<ul>
<li v-for='item in counterStore.list' :key='item.id'>{{item.name}}</li>
<ul>
</template>