通过一个简单的Demo体验并入门pinia，脚手架环境为vite

安装

安装脚手架vite

首先确保使用的脚手架是vite

 // 安装vite
 npm init vite@latest

经过一番交互完成脚手架的搭建准备

安装状态管理pinia

 npm install pinia

以上2个内容安装完成之后可以在项目根目录的package.json文件内找到相关的信息(部分片段)：

 {
  "dependencies": {
   "pinia": "^2.0.11",
   "vue": "^3.2.25"
  },
  "devDependencies": {
   "@vitejs/plugin-vue": "^2.2.0",
   "vite": "^2.8.0"
  }
 }

优化改造

因为需要在整个项目使用状态管理，因此需要在main.js文件里配置，以使它应用到整个应用(app)：

 // main.js
 import { createApp } from 'vue'
 import App from './App.vue'
 // 导入构造函数
 import { createPinia } from 'pinia'
 // 实例化 Pinia
 const pinia = createPinia()
 // 创建Vue应用实例app
 const app = createApp(App)
 // 应用以插件形式挂载Pinia实例
 app.use(pinia)
 app.mount('#app')

定义状态仓库

 // src/store/index.js
 // 引入仓库定义函数
 import { defineStore } from 'pinia'
 // 传入2个参数，定义仓库并导出
 // 第一个参数唯一不可重复，字符串类型，作为仓库ID以区分仓库
 // 第二个参数，以对象形式配置仓库的state,getters,actions
 // 配置 state getters actions
 export const mainStore = defineStore('main', {
   // state 类似组件的data选项，函数形式返回对象
   state: () => {
     return {
       msg: 'hello world!',
       counter: 0
     }
   },
   getters: {},
   actions: {}
 })

类似vuex，单独一个文件定义状态仓库并导出

读取仓库内状态并改变

在需要使用状态的组件内需要先导入状态仓库：

 import { mainStore } from "../store/index.js";

再实例化仓库函数：

 const store = mainStore();

即可使用，比如(store.counter)完整的一个例子：

 <template>
   <button @click="handleClick">修改状态数据</button>
    <!-- 模板内不需要加.value -->
     <p>{{store.counter}}</p>
     <!-- 或者使用解构之后的 -->
     <p>{{counter}}</p>
 </template>
 
 <script setup>
 // 导入状态仓库
 import { mainStore } from "../store/index.js";
 // 使状态数据保持响应式的函数  
 import { storeToRefs } from "pinia";
 // 实例化仓库
 const store = mainStore();
 // 解构并使数据具有响应式
 const { counter } = storeToRefs(store);
 
 // 点击 + 1;
 function handleClick() {
   // ref数据这里需要加.value访问
   counter.value++;
 }
 </script>

其他改变方式

$patch

对象形式

前面介绍的是少量数据的变更，如果涉及数据比较多，则推荐使用仓库实例的$patch方法批量修改，虽然看起来和前面的几乎没有区别，但是会加快修改速度，对程序的性能有很大的好处。$patch传入一个对象，对象的属性就是各种状态

 <template>
   <button @click="handleClick">修改状态数据</button>
    <p>{{msg}}</p>
     <!-- 或者使用解构之后的 -->
     <p>{{counter}}</p>
 </template>
 
 <script setup>
 // 导入状态仓库
 import { mainStore } from "../store/index.js";
 // 使普通数据变响应式的函数  
 import { storeToRefs } from "pinia";
 // 实例化仓库
 const store = mainStore();
 // 解构并使数据具有响应式
 const { msg,counter } = storeToRefs(store);
 
 // 点击 + 1;修改字符串
 function handleClick() {
   store.$patch({
      msg: "pinia good!",
     counter: counter.value + 1,
   });
 }
 </script>

函数形式

上面例子中的$patch也可以传入一个函数，函数参数为state状态：

 <template>
   <button @click="handleClick">修改状态数据</button>
    <p>{{msg}}</p>
     <!-- 或者使用解构之后的 -->
     <p>{{counter}}</p>
 </template>
 
 <script setup>
 // 导入状态仓库
 import { mainStore } from "../store/index.js";
 // 使普通数据变响应式的函数  
 import { storeToRefs } from "pinia";
 // 实例化仓库
 const store = mainStore();
 // 解构并使数据具有响应式
 const { msg,counter } = storeToRefs(store);
 
 // 点击 + 1;修改字符串
 function handleClick() {
    store.$patch((state) => {
     state.msg = "pinia good!";
     state.counter++;
   });
 }
 </script>