状态管理工具 -- Pinia

一：Pinia简介和五大优势

Pinia是vue生态里Vuex的替代者，一个全新的vue状态管理库。在Vue3成为正式版以后，尤雨溪强势推荐的项目就是Pinia。那先来看看Pinia比Vuex好的地方，也就是Pinia的五大优势。

1.可以对Vue2和Vue3做到很好的支持，也就是老项目也可以使用Pinia。
2.抛弃了Mutations的操作，只有state、getters和actions.极大的简化了状态管理库的使用，让代码编写更加容易直观。
3.不需要嵌套模块，符合Vue3的Composition api ，让代码更加扁平化。
4.完整的TypeScript支持。Vue3版本的一大优势就是对TypeScript的支持，所以Pinia也做到了完整的支持。如果你对Vuex很熟悉的化，一定知道Vuex对TS的语法支持不是完整的（经常被吐槽）。5.代码更加简洁，可以实现很好的代码自动分割。Vue2的时代，写代码需要来回翻滚屏幕屏幕找变量，非常的麻烦，Vue3的Composition api完美了解决这个问题。 可以实现代码自动分割，pinia也同样继承了这个优点。

二：Pinia开发环境安装

1.使用Vite就需要先初始化vite：

npm init vite@latest

2.启动项目：

npm install
npm run dev

3.pinia的安装：

npm install pinia

三：用Pinia的方式创建一个store

1.在main.ts文件里引入Pinia

import { createPinia } from 'pinia'

引入后，通过createPinia( )方法，得到pinia的实例，然后将Pinia挂载到Vue根实例上。

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'Pinia'

//创建pinia实例
const pinia =  createPinia()
const app = createApp(App)

//挂载到vue根实例上
app.use(Pinia)
app.mount('#app')

2.创建store状态管理库

直接在/src目录下，新建一个store文件夹。有了文件夹之后，再创建一个index.ts文件。

这个文件里的代码，我们一般只做三件事：

1. 定义状态容器(仓库)
2. 修改容器(仓库)中的 state
3. 仓库中的 action 的使用

第一步：定义状态容器(仓库)

import { defineStore} from 'pinia'

export const mainStore = defineStore('main',{
  state:()=>{
    return {}
  },
  getters:{},
  actions:{}
})

写完这段代码，你会感觉这个很像一个Vue的小组件，这也算是Pinia的一个优点。

defineStore( ) 方法的第一个参数：相当于为容器起一个名字。注意：这里的名字必须唯一，不能重复。
defineStore( ) 方法的第二个参数：可以简单理解为一个配置对象，里边是对容器仓库的配置说明。当然这种说明是以对象的形式。
state 属性： 用来存储全局的状态的，这里边定义的，就可以是为SPA里全局的状态了。
getters属性： 用来监视或者说是计算状态的变化的，有缓存的功能。
actions属性： 对state里数据变化的业务逻辑，需求不同，编写逻辑不同。说白了就是修改state全局状态数据的。
第二步：我们在Store里定义一个State，我们这里就写Hello Pinia!。

state:()=>{
   return {
     helloPinia:'Hello Pinia!'
   }
},

这时候这个helloPinia就是全局的状态数据，是每个页面和组件都可以通过Pinia方法读取到的。

3.在vue3组件里读取Store数据

在\src\components里，新建一个Hyy.vue的组件。代码如下：

先引入mainStore,然后通过mainStore得到store实例，就可以在组件里调用store里的state定义的状态数据了

<template>
  <div>
      <h2 class="">{{ store.helloPinia}}</h2>
  </div>
</template>

<script lang="ts">
import { mainStore } from "../store/index";
export default{
  setup(){
      const store = mainStore();
      
      return{
          store,
      }
  }
}
</script>

写好这个组件后，到App.vue里引入，就可以使用了：

<script setup lang="ts">
  import Hyy from "./components/Hyy.vue";
</script>

<template>
  <Hyy />
</template>

<style>
</style>