### 一、安装pinia ```js npm i pinia 或 yarn add pinia ``` ### 二、引入pinia ```js // main.ts import { createApp } from 'vue' import App from './App.vue' // 引入pinia并实例化 import { createPinia } from 'pinia' const pinia = createPinia() createApp(App).use(pinia).mount('#app') ``` ### 三、创建pinia ```js // 1.在src目录下创建 store 文件 // 2.新增 counter.ts 测试仓库,代码如下 // counter.ts import { defineStore } from "pinia"; import { computed, ref } from 'vue' // defineStore 接受两个参数 // 参数1：仓库的id（字符串） // 参数2：options（对象） export const useCounterStore = defineStore('counter', () => { // 定义数据 const counter = ref(100) // 定义计算属性 const counterComputer = computed(() => { return counter.value * 2 }) // 定义方法 const add = () => { counter.value++ } return { counter, add, counterComputer } }) ``` ### 四、在vue文件中使用 ```js ``` ### 五、pinia数据持久化 1. 安装插件 ```js npm i pinia-plugin-persistedstate 或 yarn add pinia-plugin-persistedstate ``` 2. 引入插件 ```js // main.ts import { createApp } from 'vue' import App from './App.vue' // 引入pinia import { createPinia } from 'pinia' // 引入持久化插件 import persist from 'pinia-plugin-persistedstate' // 实例化pinia const pinia = createPinia() createApp(App) .use(pinia.use(persist)) // 注册插件 .mount('#app') ``` 3.在需要启用数据持久化的store文件中开启配置 persist:true ```js // counter.ts import { defineStore } from "pinia"; import { computed, ref } from 'vue' // defineStore第三个参数中启用持久化配置 // 当启用持久化后，pinia数据发生改变时，会自动将数据存到localStorage中 // 当页面刷新后，会自动读取localStorage export const useCounterStore = defineStore('counter', () => { const counter = ref(100) const add = () => { counter.value++ } const counterComputer = computed(() => { return counter.value * 2 }) return { counter, add, counterComputer } }, { persist: true // 开启pinia数据持久化 }) ``` ### 六、总结 1. pinia中定义的数据（如ref）可以类比为vuex中的state; 2. pinia中定义的计算属性可以类比为vuex中的getters; 3. pinia中定义的方法可以类比为vuex中的mutations、actions，区别在于pinia中没有区分同步和异步; 4. pinia中没有模块化的概念，每个ts文件都为一个全局仓库，不同于vuex仅有一个仓库; 5. 相对于vuex的各种繁琐的api，pinia用法更简便

数量：{{ store.counter }}

计算属性：{{ store.counterComputer }}

数量：{{ counter }}

计算属性：{{ counterComputer }}