Pinia 添加到项目

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

1. 提供更加简单的API （去掉了 mutation）
2. 提供符合组合式风格的API
3. 去掉 modules 的概念，每一 store 都是一个独立的模块
4. 搭配 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 基础使用

1. 定义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 }
})

2. 组件使用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>