（学习笔记）抛弃 Vuex，使用 Pinia

╰半夏微凉° 2023-10-10 17:48 9阅读 0赞

**目录**

学习视频

一、环境初始化

1.创建项目

2.安装pinia

二、基本使用

1.创建pinia示例并挂载

2.基本使用

--------------------

## 学习视频 ##

[06 Pinia和VueDevtools\_哔哩哔哩\_bilibili][06 Pinia_VueDevtools_bilibili]

## 一、环境初始化 ##

### 1.创建项目 ###

$ yarn create vite

### 2.安装pinia ###

$ yarn add pinia

## 二、基本使用 ##

### 1.创建pinia示例并挂载 ###

import { createApp } from 'vue'
    import App from './App.vue'
    import { createPinia } from 'pinia'
    // 创建pinia实例
    const pinia = createPinia()
    // 挂载到根实例上
    createApp(App).use(pinia).mount('#app')

### 2.基本使用 ###

import { defineStore } from "pinia"
    
    // 1.定义并导出容器
    // 参数1：容器的ID，必须唯一，将来Pinia会把所有的容器挂载到根容器，每个容器的名字就是这里的ID
    export const useMainStore = defineStore('main', {
      /**
       * 类似与组件的data， 用来存储全局状态
       * 1.必须是函数：这样是为了在服务端渲染的时候避免交叉请求导致的数据状态污染（客户端其实无所谓）
       * 2.必须是箭头函数：为了更好的ts类型推导
       * 返回值：一个函数，调用该函数即可得到容器实例
       */
      state: () => {
        return {
          count: 100,
          foo: 'bar',
          arr: [1, 2, 3]
        }
      },
      /**
       * 类似于组件的computed，用来封装计算属性，有【缓存】功能
       */
      getters: {
        // 每个函数接受一个可选参数：state状态对象
        // count10(state) {
        //   console.log('count10()调用了');// 具有缓存功能
        //   return state.count + 10
        // }
    
        // （不建议）如果不使用state而使用this，此时就不能对返回值类型做自动推导了，必须手动指定
        count10(): number {
          return this.count + 10
        }
      },
      /**
       * 完全类比于Vue2组件中的methods（可以直接用this)，用来【封装业务逻辑】，修改state
       */
      actions: {
        /**
         * 注意！！不能使用箭头函数定义actions！！一定要用普通函数！！！
         * why？因为箭头函数绑定了外部this
         */
        changeState(num: number) {
          // 可以直接使用this，像极了Vue2
          // this.count++
          // this.foo = 'hello'
          // this.arr.push(4)
    
          // 对于批量修改，建议使用patch做优化
          this.$patch((state) => {
            state.count += num
            state.foo = 'hello'
            state.arr.push(4)
          })
        }
      }
    })
    // 2.容器中的state
    
    // 3.修改state
    
    // 4.actions的使用

打开App.vue，砍掉没用的，我们直接使用项目中`HelloWorld.vue`组件

下面是`HelloWorld.vue`的内容

<template>
      <p>{
       { mainStore.count }}</p>
      <p>{
       { mainStore.foo }}</p>
      <p>{
       { mainStore.arr }}</p>
      <p>{
       { mainStore.count10 }}</p>
      <p>{
       { mainStore.count10 }}</p>
      <p>{
       { mainStore.count10 }}</p>
      <hr />
      <p>{
       { count }}</p>
      <p>{
       { foo }}</p>
      <p>
        <button @click="handleChangeState">修改数据</button>
      </p>
    </template>
    
    <script lang="ts" setup>
    import { storeToRefs } from 'pinia'
    import { useMainStore } from '../store'
    
    // 【哪里使用写哪里】，此时要在HelloWorld组件中用，那就写这里。这很Composition API
    const mainStore = useMainStore() 
    
    // 禁止！这样会丧失响应性，因为pinia在底层将state用reactive做了处理
    // const { count, foo } = mainStore
    // 解决方案：将结构出的数据做ref响应式代理
    const { count, foo } = storeToRefs(mainStore)
    
    const handleChangeState = () => {
      // ==============数据修改的几种方式=============
      // 方式一：直接修改
      // mainStore.count++
    
      // 方式二：使用 $patch(对象) 批量修改，建议使用，底层做了性能优化
      // mainStore.$patch({
      //   count: mainStore.count + 1,
      //   foo: 'hello',
      //   arr: [...mainStore.arr, 4] // 这就不优雅了，所以有了方式三
      // })
    
      // 方式三：使用 $patch(回调函数)，这个更优雅，墙裂推荐！！！
      // 回调函数中的state参数，就是Store定义时里面的state!
      // mainStore.$patch((state) => {
      //   state.count++
      //   state.foo = 'hello'
      //   state.arr.push(4)
      // })
    
      // 方式四：逻辑较为复杂时，应封装到Store的actions中，并对外暴露接口
      mainStore.changeState(10)
    }
    </script>

[06 Pinia_VueDevtools_bilibili]: https://www.bilibili.com/video/BV11Y411b7nb?p=6&vd_source=9497a07b4c66a69fcd28375760bc991e