[pinia快速入门]1.安装pinia和第一个例子

Pinia是第一代的vue状态管理库，它的开发者也是Vuex的核心开发者，据Pinia开发者说，下一版的Vuex风格和API设计方式会和Pinia非常相似。
Pinia抛弃了原来Vuex中一些复杂的概念，写起来也更加简单灵活，原生对ts有很好支持。我们现在就来开始学习Pinia。

安装

可以使用yarn或者npm来安装：

yarn add pinia
# 或者
npm install pinia

相信大家安装包已经轻车熟路了，我们下面就以工作中的实例来学习Pinia。

第一个例子

首先我们还是使用

vue create pinia_demo

来创建一个新的vue3项目，项目的名字叫做pinia_demo。
还是按照管理，我们把没有的代码都删掉，在APP.vue中只剩下一个div

我们之前学习过script setup语法了，我们就来使用它

1.安装pinia

在我们项目的目录下执行

npm i pinia

我是使用npm安装，i是install的简写，这样就安装好了pinia

2.在main.js中使用pinia

我们在项目中要使用pinia，一定要在main.js中告诉vue我们要使用这个库了：

import { createApp } from 'vue'
import { createPinia } from 'pinia' // 从pinia中导入createPinia方法
import App from './App.vue'

const app = createApp(App)
app.use(createPinia()) // 使用vue实例的use方法，告诉vue我们要使用pinia
app.mount('#app')

3.创建pinia store的文件

首先，按照惯例，我们在src目录下面创建一个文件夹store，存放我们pinia相关的文件，也就是处理我们全局数据的位置，
我们在全局数据中最常处理的就是用户的信息，我们新建一个js文件，叫做profileStore.js，在这里面定义一个pinia的store，一个pinia的store可以理解为是一个全局数据的模块
比如我们的profileStore，就是用户信息这个模块
每增加一个模块，我们就在store文件夹下建立一个js文件，比如后面我们添加permissionStore.js，表示权限模块，
现在我们先只写用户模块，profileStore.js的内容

import { defineStore } from 'pinia' //从pinia中导入，defineStore方法，用于定义一个新的store
export const useProfileStore = defineStore('profile', { // 使用defineStore方法定义store
  state() { // state表示这个store里的状态，也就是存放数据的地方
    return {
      userName: '林哥', // 这里我们定义了一个数据叫userName，用于存放我们的用户名 
    }
  },
})

这段代码有几个地方需要解释一下：
1）我们在使用defineStore时，它有两个参数，第一个参数是这个store的id，必须是唯一，我们这个模块的是用户信息，所以就叫profile，和文件名还有要导出的方法useProfileStore保持一致。
2）第二个参数就是一个对象，用于定义我们的store对象，现在我们定义了存放数据的state，它是一个方法，返回一个对象，跟之前的data类似。
3）我们导出的这个useProfileStore方法，按照管理命名是以use开头，然后再加上模块的名称

4.使用pinia store中的数据

在App.vue中引入我们的用户信息模块，就可以绑定在模板中显示了：

然后页面上就可以显示用户名了：

用户名是： 林哥

这节课内容就是这些了，我们来总结一下重点：
1）定义store时需要一个唯一的id，一般与我们模块名称相同
2）我们的全局数据是存放在store的state中
3）使用useProfileStore方法获取到store实例，可以直接绑定到模板中

ps：pinia热更新有点问题，修改代码以后大家记着刷新页面。