一、创建项目
1. npm create vite@latest
2. 输入项目名称
3. cd 到新建的项目
4. npm install 安装项目依赖
5. npm run dev 运行项目

二、安装Pinia

npm install pinia

三、在main.js中挂载
1.引入pinia
import {createPinia} form “pinia”;
2.创建pinia对象
const pinia = createPinia();
3.挂载实例
app.use(pinia).mount(‘#app’);

四、创建store

//     ./src/store/index.js
// 1.引入pinia对象
import {defineStore} from 'pinia';// 2.创建管理状态仓库
export const useStore = defineStore("store", {// 选项式，更接近于vuexstate: () => {return {num: 1,name: 'gxy',}},getters: {},actions: {}
})

五、在组件中使用选项式store

<script setup>// 1.导入storeimport {useStore} from "../store"// 2.声明const store= useStore();</script><template><h1>HelloWorld</h1><!-- 3.展示数据 --><p>name：{{ store.name }}</p>
</template><style scoped></style>

六、组件中修改pinia数据
pinia中的数据在组件中可以直接修改值，不需要通过mutations。

<script setup>// 1.导入storeimport {useStore} from "../store"// 2.声明const store = useStore();// 4.修改state中的数据const numAdd = () => {store.num ++;}</script><template><h1>HelloWorld</h1><!-- 3.展示数据 --><p>name：{{ store.name }}</p><p>num： {{ store.num }}</p><button @click="numAdd">加</button>
</template><style scoped></style>

七、组件中解构数据进行修改

<script setup>// 1.导入storeimport {useStore} from "../store"// vue提供解构store的方式,将整个stroe中的数据元素全部解构（属性、方法等）import {toRefs} from "vue"// pinia提供解构store的方式，只解构属性。import {storeToRefs} from "pinia"// 2.声明const store = useStore();// 4.解构后修改数据,通过vue提供的方式解构出来的数据,是将整个stroe中的数据元素全部解构（属性、方法等）let {name, num} = toRefs(store);// 5.通过pinia提供的方式解构，只解构属性。// let {name, num} = storeToRefs(store);const numAdd = () => {num.value ++;}</script><template><h1>HelloWorld</h1><!-- 3.展示数据 --><p>name：{{ name }}</p><p>num： {{ num }}</p><button @click="numAdd">加</button>
</template><style scoped></style>

八、pinia对数据批量更新

<script setup>// 1.导入storeimport {useStore} from "../store"// pinia提供解构store的方式，只解构属性。import {storeToRefs} from "pinia"// 2.声明const store = useStore();let {name, num, arr} = storeToRefs(store);const numAdd = () => {// 4.批量修改数据store.$patch((state) => {state.num ++;state.name = '张三';state.arr.push(4)})// num.value ++;}</script><template><h1>HelloWorld</h1><!-- 3.展示数据 --><p>name：{{ name }}</p><p>num： {{ num }}</p><p>arr： {{ arr }}</p><button @click="numAdd">加</button>
</template><style scoped></style>

九、pinia中的getters（Pinia中的getter和Vue中的计算属性几乎一样，在获取State值之前可以做一些逻辑处理。getter中的值有缓存特性，如果值没有改变，多次使用也只会调用一次）
js

// 1.引入pinia对象
import {defineStore} from 'pinia';// 2.创建管理状态仓库
export const useStore = defineStore("store", {// 选项式，更接近于vuexstate: () => {return {num: 1,name: 'gxy',arr: [1,2,3]}},getters: {  //getter中不仅可以传递state直接改变数据状态，还可以使用this来改变数据// 通过state来获取改变数据changeNums(state) {return state.num + 5},// 通过this来获取改变数据changeNum() {// 由于该方法有缓存机制，所以不管在页面中调用几次，这里只会运行一次（log只会打印一次）。这样大大提高了运行性能。console.log('************************');return this.num + 5}},actions: {}
})

组件

<script setup>// 1.导入storeimport {useStore} from "../store"// pinia提供解构store的方式，只解构属性。import {storeToRefs} from "pinia"// 2.声明const store = useStore();let {name, num, arr, changeNum} = storeToRefs(store);</script><template><h1>HelloWorld</h1><!-- 3.展示数据 --><p>num： {{ changeNum }}</p><p>num： {{ changeNum }}</p><p>num： {{ changeNum }}</p>
</template><style scoped></style>

十、actions的使用
在actions中定义的方法在任务组件中都可以调用
js

// 1.引入pinia对象
import {defineStore} from 'pinia';// 2.创建管理状态仓库
export const useStore = defineStore("store", {// 选项式，更接近于vuexstate: () => {return {num: 1,name: 'gxy',arr: [1,2,3]}},getters: {  //getter中不仅可以传递state直接改变数据状态，还可以使用this来改变数据},actions: {upData(val) {this.num += val}}
})

组件

<script setup>// 1.导入storeimport {useStore} from "../store"// pinia提供解构store的方式，只解构属性。import {storeToRefs} from "pinia"// 2.声明const store = useStore();let {name, num, arr, changeNum} = storeToRefs(store);const updata = () => {store.upData(200)}
</script><template><h1>HelloWorld</h1><!-- 3.展示数据 --><p>num： {{ changeNum }}</p><p>num： {{ changeNum }}</p><p>num： {{ changeNum }}</p><p>nums： {{ num }}</p><!-- 4.调用actions里的方法来实现更新数据 --><div @click="updata">upDate</div>
</template><style scoped></style>

十一、Pinia模块互相调用

1.在store中创建一个Shop.js，用于管理店铺数据。
2.在主管理器中引入Shop管理器，通过实例后就可以获取到Shop中的数据了。

import {defineStore} from 'pinia';// 1.导入shop模块
import {useShopStore} from './shop';export const useStore = defineStore("store", {// 选项式，更接近于vuexstate: () => {return {num: 1,name: 'gxy',arr: [1,2,3]}},getters: {  //getter中不仅可以传递state直接改变数据状态，还可以使用this来改变数据// 获取shop数据方法getShopList() {return useShopStore().list;}},actions: {upData(val) {this.num += val}}
})

组件

<script setup>// 1.导入storeimport {useStore} from "../store"// pinia提供解构store的方式，只解构属性。import {storeToRefs} from "pinia"// 2.声明const store = useStore();let {name, num, arr, getShopList} = storeToRefs(store);const updata = () => {store.upData(200)}
</script><template><h1>HelloWorld</h1><!-- 3.展示数据 --><p>num： {{ changeNum }}</p><p>num： {{ changeNum }}</p><p>num： {{ changeNum }}</p><p>nums： {{ num }}</p><!-- 展示shop数据 --><p>shop: {{ getShopList }}</p><!-- 4.调用actions里的方法来实现更新数据 --><div @click="updata">upDate</div>
</template><style scoped></style>

十二、pinia数据持久化
1.安装插件
npm install pinia-plugin-persist

2.在main.js中挂载该插件

import { createApp } from 'vue'
import App from './App.vue'
import {createPinia} from "pinia"// 1.导入 pinia持久化插件
import PiniaPluginPersist from "pinia-plugin-persist"const pinia = createPinia();// 2.将插件注册在Pinia中
pinia.use(PiniaPluginPersist)const app = createApp(App);app.use(pinia);app.mount('#app');

3.在对应的数据管理器中配置持久化

import {defineStore} from "pinia"export const useShopStore = defineStore('shop', {state: () => {return {list: ['零食','生鲜'],price: [12,13]}},getters: {getShopList() {return this.list;}},actions: {upData(name, price) {this.list.push(name);this.price.push(price)}},// 使用插件开启数据缓存persist: {enabled: true,strategies: [{// key的名称key: "my-shop",// 更改默认存储，改为localStoragestrorage: localStorage,// 默认是全部进行存储**// 可以选择哪些进行local存储的数据，这样就不用全部都进行存储了。这里把list进行了持久化保存**paths: ["list"],}]}
})

4.组件查看

<script setup>// 1.导入storeimport {useShopStore} from "../store/shop"// pinia提供解构store的方式，只解构属性。import {storeToRefs} from "pinia"// 2.声明const store = useShopStore();let {list,price,getShopList} = storeToRefs(store);**//在这里更新数据时分别给商品列表和商品价格都添加了数据，当页面刷新时商品价格列表中添加的数据没有被持久保存，商品名称被持久保存了**const updata = () => {store.upData('酒水', 200)}
</script><template><h1>HelloWorld</h1><!-- 3.展示数据 --><p>list： {{ list }}</p><p>price： {{ price }}</p><p>shop: {{ getShopList }}</p><!-- 4.调用actions里的方法来实现更新数据 --><div @click="updata">upDate</div>
</template><style scoped></style>