Vue前端开发-Pinia模块安装与配置
Pinia 是Vue2中Vuex的升级版，与Vuex的功能一样，都是存储Vue中的共享状态，但它比Vuex的使用更加简单，所有状态逻辑的改变都被封装至action 中，支持多个Store对象管理，热模块更换，在不刷新页面情况下修改Store，并且它的体积不到1kb。
由于Vuex是重量级的，存在性能问题，常用于中小型Vue项目的过渡，适用于大规模、高复杂的项目，而由于Pinia是轻量极的，有极强的灵活性，非常适用于中小型项目，也特别适用于低复杂度的Vue项目，接下来一起我们一走进Pinia的世界。
1 安装和配置Pinia
与其他模块一样，Pinia 的安装只需要在项目根目录下执行下列指令：
npm install pinia
如果需要进行全局安装，则再添加一个 -g 的参数，如果在项目根目录下安装成功后，可以直接打开package.json文件，查看安装模块的版本号，效果如下图10-1所示：
Pinia 安装成功后，并不能直接在组件中使用，需要对它进行全局配置，首先，在src目录下添加一个store文件夹，并在该文件夹下添加一个名为index的js文件，并在该文件中加入如代码清单10-1所示代码：
代码清单10-1 index.js代码
import { createPinia } from "pinia";
const pinia = createPinia();
export default pinia;
在上述代码中，先从pinia 模块中导出一个名为createPinia的方法，然后，执行该方法创建一个pinia 对象，并将该对象赋值给名为 pinia的常量，最后，导出这个常量。
接下来，打开main.js，在该文件中加入如代码清单10-2所示代码：
代码清单10-2 main.js代码
import { createApp } from 'vue'
import App from './App.vue'
import Global from './components/ch6/Global'
import router from './router/index'
import request from './plugins/axios';
import pinia from "./store/index"
let app = createApp(App);
app.config.globalProperties.$http = request;
app.component("Global", Global);
app.use(router).use(pinia);
app.mount('#app')
在上述代码的加粗部分中，第一行是导入构建完成的pinia对象，第二行是将pinia对象挂载至vue实例化对象app上，通过这两步操作，就可以任意的组件中直接通过this访问到pinia对象和它的组成部分。
2 创建Store
完成pinia的安装和全局性配置后，接下来就可以构建pinia的结构，pinia是状态管理工具，管理的方式是构建一个个store对象，与vuex的分模块管理不同，pinia中的一个store对象就是一个模块，它与vuex的区别如下图10-2所示：
从上述示意图，可以看出，Pinia中的模块，其实就是一个单独的Store，一个Store就是一个模块，因此，可以根据模块的功能不同，创建不同的Store对象，在创建Store对象时，需要先从Pinia中导出defineStore方法，通过该方法来定义，代码如下所示：
import { defineStore } from 'pinia'
export const StoreA = defineStore('StoreA_id', {
// other options...
})
在上述代码中，当定义一个Store对象时，需要调用defineStore方法，该方法中有两个参数，第一个参数为Store对象在应用程序中的唯一标志，不能重复，第二个参数是一个配置对象，描述Store对象其他部分的组成结构。
例如，在store目录下，再添加一个名称为schStore.js的文件，用于定义一个保存学校状态的Store对象，加入如代码清单10-3所示的代码：
代码清单10-3 schStore.js代码
import { defineStore } from "pinia";
export const useSchStore = defineStore("sch_id", {
state() {
},
getters:{
},
actions:{
}
})
在上述代码的defineStore方法中，第一个参数是必需的，虽然是字符串，但也是一个id号，不能重复，必须是唯一的，返回的函数命名中，通常需要添加一个use前缀，表示是一个跨组件使用的约定，建议保留这种命名方式。
定义完成后，在任意的组件中就可以像Vuex一样，通过map获取到该对象中定义的变量和方法，代码格式如下所示：
import { mapState,mapActions } from 'pinia'
import { useSchStore } from "../../store/schStore"
computed:{
...mapState(useSchStore ,[状态变量名称])
}
methods:{
...mapActions(useSchStore ,[方法名称])
}
