vue3-Pinia

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>