知识回调（不懂就看这儿！）

知识专栏	专栏链接
Vuex知识专栏	https://blog.csdn.net/xsl_hr/category_12158336.html?spm=1001.2014.3001.5482
Vuex官方文档	https://vuex.vuejs.org/zh/
Pinia官方文档	https://pinia.web3doc.top/

场景复现

上期文章中我们介绍了pinia的核心概念以及pinia相比vuex的优势，给出了几个能够展现pinia优势的实例。本期文章则切入项目实战，从安装和使用pinia开始，一步一步学习如何将pinia运用到项目实战中去。

一、环境搭建

1.创建项目

环境搭建还是沿用vite构建项目的方法，不知道怎么构建的小伙伴可以去vue专栏找找看哦~（用vite构建vue项目还是非常轻量快捷的！！强烈推荐使用！！）
我们依然使用npm包指令来使用vite构建项目，在命令行输入以下指令即可

npm init vite

输入后根据提示选择vue项目，选择TypeScript语言构建项目即可。

2.安装pinia

安装pinia的方法有很多，可以用npm，可以用yarn，我们还是沿用npm包进行安装。

npm install pinia

在命令行输入以上指令后，等待安装成功即可。安装成功后，在package.json文件中，查看下载的依赖，如果有pinia和对应的版本号，即为下载成功。

二、基本使用

创建完vue项目并且成功安装pinia之后，我们首先要做的，一定要创建pinia实例，并将其全局挂载！！（不论是pinia还是其他的依赖，只要你需要使用，并且使用频率很频繁，都建议全局挂载）

1.创建pinia示例并挂载

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

2.基本使用

访问state

我们可以直接通过state.访问

const store = useStore()
store.counter++

使用getters

要注意，在pinia中，Getters和state里面不能使用相同的名字

export const useStore = defineStore('main', {
  state: () => ({
    counter: 0,
  }),
  getters: {
    doubleCount: (state) => state.counter * 2,
  },
})

使用actions

export const useStore = defineStore('main', {
  state: () => ({
    counter: 0,
  }),
  actions: {
    increment() {
      this.counter++
    },
    randomizeCounter() {
      this.counter = Math.round(100 * Math.random())
    },
  },
})

3.详细示例（详细注解）

// store/index.ts
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组件。

<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <HelloWorld />
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

下面是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>