Pinia理解【Vue3】

什么是Pinia

Pinia是Vue的专属的最新状态管理库，是Vuex状态管理工具的替代品

优势：

• 提供了更加简单的API (去掉了mutation)
• 提供符合组合式风格的API(和Vue3新语法统一)
• 去掉了 modules 的概念，每一个 store 都是一个独立的模块
• 搭配 TypeScript 一起使用提供可靠的类型推断

添加Pinia到Vue项目

1. 使用 create-vue 创建空的新项目 npm init vue@latest
2. 按照官方文档安装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实现计数器案例

App.vue

<script setup>
  // 1.导入 use 打头的方法
  import {useCounterStore} from '@/stores/counter'
  // 2.执行方法得到store实例对象
  const counterStore = useCounterStore()
  console.log(counterStore);
</script>

<template>
  <button @click="counterStore.increment">{{ counterStore.count }}</button>
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>

counter.js

// 导入一个方法 defineStore
import {defineStore} from 'pinia'
import {ref} from 'vue'

export const useCounterStore = defineStore('counter', ()=>{
    //定义数据（state）
    const count = ref(0)
    // 定义修改数据的方法（action 同步+异步）
    const increment = ()=>{
        count.value++
    }

    // 以对象的方式return供组件使用
    return {
        count,
        increment
    }
})

getters实现

Pinia中的 getters 直接使用 computed函数 进行模拟

//定义数据（state）
    const count = ref(0)
// getter定义
    const doubleCount = computed(() => count.value * 2)

action如何实现异步

action中实现异步和组件中定义数据和方法的风格完全一致

 // 定义异步action
    const list = ref([])
    const getList = async ()=>{
        const res = await axios.get(API_URL)
        list.value = res.data.data.channels
    }

storeToRefs

使用storeToRefs函数可以辅助保持数据（state + getter）的响应式解构

//响应式丢失 视图不再更新
const {count, doubleCount} = counterStore

// 保持数据响应式
const {count, doubleCount} = storeToRefs(counterStore)

总结：

1. Pinia是用来做什么的？
   集中状态管理工具，新一代的vuex
2. Pinia中还需要mutation吗？
   不需要，action既支持同步也支持异步
3. Pinia如何实现getter?
   computed计算属性函数
4. Pinia产生的Store如何解构赋值数据保持响应式？
   storeToRefs