什么是Pinia： Pinia 是 Vue 的存储库，它允许跨组件/页面共享状态。pinia是Vuex的升级版
目录
什么是Pinia： Pinia 是 Vue 的存储库，它允许跨组件/页面共享状态。pinia是Vuex的升级版
一.Pinia的使用
1.在项目中安装Pinia
# 使用 yarn
yarn add pinia
# 使用 npm
npm install pinia2.引入使用
vue3引入写法：
# main.js或main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia';
const app = createApp(App);
const pinia = createPinia();
app.use(pinia);
app.mount('#app')vue2引入写法：
# main.js或main.ts
import { createPinia } from 'pinia'
const pinia = createPinia();
new Vue({
el: '#app',
// ...
// 同一个 `pinia` 实例可以在多个 Vue 应用程序中使用
pinia,
})3.Pinia模块创建
在vue项目中，我们常常在 src 目录中新建一个名为 stores 的文件夹，用来管理Pinia模块。
我们可以在这个文件夹里创建多个js或ts文件作为模块
# src/stores/index.js
// 使用前先引入 defineStore；
import { defineStore } from 'pinia';
// 我们可以使用es6 的模块化规范进行导出
// defineStore 方法有两个参数，第一个参数是模块化名字（相当于ID，不能重复）
// 第二个参数是选项
export const useStore = defineStore('main', {
state(){ // 存放模块的变量
return {
count: 10
}
},
getters:{ // 相当于vue的计算属性，可以缓存数据
},
actions:{ // 可以通过actions 方法，改变 state 里面的值。
}
})4.在页面中使用
<template>
<div>
<p>{{store.count}}</p>
</div>
</template>
<script>
// 引入 useStore；
import { useStore } from '../store/index.js'
export default {
setup(props) {
// useStore 是一个方法，调用之后返回一个对象。
const store = useStore();
return {
store
}
}
}
</script>其它写法：
<template>
<div>
<p>{{count}}</p>
</div>
</template>
<script>
import { useStore } from '../store/index.js'
import { storeToRefs } from 'pinia';
export default {
setup(props) {
const store = useStore();
return {
...storeToRefs(store)
}
}
}
</script>5.pinia修改state数据的方法：
1.修改 store对象的数据：
// html 代码
<p>{{count}}</p>
<button @click="add">累加</button>
// js 代码
const store = useStore();
const add = () => {
store.count ++
}2.$patch传递一个对象来修改
// html 代码
<p>{{count}}</p>
<button @click="add">累加</button>
// js 代码
const store = useStore();
const add = () => {
store.$patch({
count: store.count + 1
})
}可以同时修改多个数据：
// html 代码
<p>我是count数据{{count}}</p>
<p>num{{num}}</p>
<button @click="add">累加</button>
// js 代码
const store = useStore();
const add = () => {
store.$patch({
count: store.count + 1,
num: store.num + 1
})
}3. $patch传递一个函数来修改：
// html 代码
<p>count数据:{{count}}</p>
<p>num{{num}}</p>
<button @click="add">累计</button>
// js 代码
const store = useStore();
const add = () => {
store.$patch(state => {
state.count++;
state.num++;
})
}
4. actions里修改：
// 在 actions 里面定义一个方法
import { defineStore } from 'pinia';
export const useStore = defineStore('main', {
state(){
return {
count: 10,
num: 20
}
},
getters:{
},
actions:{
piniaAdd(){
this.count++;
// 注意：如果使用箭头函数，this 指向就会发生改变，不能再使用 this.count++ 了
}
}
})
// 页面
// html 代码
<p>我是count数据{{count}}</p>
<p>num{{num}}</p>
<button @click="add">累计</button>
// js代码
const store = useStore();
const add = () => {
store.piniaAdd();
}二. Pinia持久化
安装持久化插件：
// 使用 npm 安装
npm i pinia-plugin-persist --save --include=dev
// 使用 yarn 安装
yarn add pinia-plugin-persist引入持久化插件：
import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia';
// 下面是持久化插件。
import piniaPersist from 'pinia-plugin-persist'
const app = createApp(App);
const pinia = createPinia();
pinia.use(piniaPersist);
// 注意：是 pinia.use 不能写成 app.use
app.use(pinia);
app.mount('#app')在模块中使用：
import { defineStore } from 'pinia';
export const useStore = defineStore('main', {
state(){
return {
count: 10,
num: 20
}
},
persist: { // 持久化插件
enabled: true, // 使用存储
strategies: [ // 此属性选写
//在不写的情况下，默认存储到 sessionStorage 里,默认存储 state 里的所有数据。
{ storage: localStorage, paths: ["count"] },
// paths 是一个数组，如果写了 就会只存储 count 变量，可以写多个。
]
},
getters:{
},
actions:{
piniaAdd(){
this.count++;
}
}
})欢迎学习和交流！