npm install pinia
// src/main.ts
import './assets/main.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.use(ElementPlus)
app.mount('#app')
Store 是用defineStore()定义的,它的第一个参数是一个独一无二的id,也是必须传入的,Pinia 将用它来连接 store 和 devtools。
defineStore()第二个参数可接受两类值:Setup函数或Options对象
state 属性: 用来存储全局的状态的,这里边定义的,就可以是为SPA里全局的状态了。
getters属性:用来监视或者说是计算状态的变化的,有缓存的功能。
actions属性:对state里数据变化的业务逻辑,需求不同,编写逻辑不同。说白了就是修改state全局状态数据的。
import { defineStore } from 'pinia'
// `defineStore()` 的返回值命名最好使用 store 的名字,同时以 `use` 开头且以 `Store` 结尾
export const useStudyStore = defineStore('studyId', {
state: () => {
return {
counter: 0,
}
},
getters:{},
actions:{}
})
在Options式中:Store 的数据(data),getters 是 Store 的计算属性(computed),而actions则是 Store 的方法(methods)。
import { defineStore } from 'pinia'
// `defineStore()` 的返回值命名最好使用 store 的名字,同时以 `use` 开头且以 `Store` 结尾
export const useStudyStore = defineStore('studyId', ()=>{
const count = ref(0)
const name = ref('Ghmin')
const computedTest= computed(() => count.value * 99)
function int() {
count.value++
}
return { count, name, computedTest, int}
})
在Setup式中:ref()成为state属性,computed()变成getters,function变成actions。
使用上面两种方式其中一种后,便可以在组件中使用Store了。
<script setup>
import { useStudyStore } from '@/stores/study'
const store = useStudyStore();
</script>
import { defineStore } from 'pinia'
export const useStudyStore = defineStore('studyId', {
state: () => {
return {
name: 'Ghmin',
num:0
}
},
})
<template>
<div>
<h1>vue组件</h1>
{{ name }}
</div>
</template>
<script setup>
import { useStudyStore } from '@/stores/study'
const store = useStudyStore();
let { name } = store;
</script>
注:pinia可以直接修改state数据,无需像vuex一样通过mutations才可以修改,所以上面的let { name } = store 这种解构是不推荐的,因为它破坏了响应性。
而为了从 Store 中提取属性,同时保持其响应性,这里需要使用storeToRefs(),它将为每个响应性属性创建引用。当你只使用 Store 的状态而不调用任何action时,它会非常有用。使用方法如下
<template>
<div>
<h1>vue组件</h1>
{{ name }}
</div>
</template>
<script setup>
//这里需要先引入
import { storeToRefs } from 'pinia'
import { useStudyStore } from '@/stores/study'
const store = useStudyStore();
//这样解构的属性将保持响应性
let { name } = storeToRefs(store);
// name.value 可以直接修改到Store中存储的值
</script>
如果有多条数据要更新状态,推荐使用$patch方式更新。因为Pinia的官方网站,已经明确表示$ patch的方式是经过优化的,会加快修改速度,对程序的性能有很大的好处。
<template>
<div>
<h1>A组件</h1>
{{ num}}
{{ arr }}
<button @click='btn'>按钮</button>
</div>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { useStudyStore } from '@/stores/study'
const store = useStudyS
let { num,arr } = storeToRefs(store);
const btn = ()=>{
//批量更新
store.$patch(state=>{
state.num++;
state.arr.push({name:'Ghmin'});
})
}
</script>
actions:对state里数据变化的业务逻辑,需求不同,编写逻辑不同。说白了就是修改state全局状态数据的。
import { defineStore } from 'pinia'
export const useStudyStore = defineStore('studyId', {
state: () => {
return {
num: 0
}
},
getters:{},
actions:{
changeNum( val ){
this.num+= val;
}
}
})
<template>
<div>
<h1>使用actions</h1>
{{ num}}
<button @click='add'>加99</button>
</div>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { useStudyStore } from '@/stores/study'
const store = useStudyStore();
let { num} = storeToRefs(store);
const add = ()=>{
store.changeNum(10);
}
</script>
getters:和vuex的getters几乎类似,用来监视或者说是计算状态的变化的,有缓存的功能。
import { defineStore } from 'pinia'
export const useStudyStore = defineStore('studyId', {
state: () => {
return {
num: 0,
}
},
getters:{
numGetters(){
return this.counter + 999;
}
},
actions:{}
})
<template>
<div>
<h1>getters的使用</h1>
{{ num}}
{{ numGetters}}
</div>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { useStudyStore } from '@/stores/study'
const store = useStudyStore();
let { num,numGetters} = storeToRefs(store);
</script>
npm i pinia-plugin-persist --save
import { createPinia, defineStore } from "pinia";
import piniaPluginPersist from 'pinia-plugin-persist'
const store = createPinia()
store.use(piniaPluginPersist)
export default store
enabled: true即表示开启数据缓存
export const useUserStore = defineStore({id: 'userId',
state: () => {
return {
userInfo:{
name:'Ghmin',
age:18,
sex:'男'
},
id:'666666'
}
},
// 开启数据缓存
persist: {
enabled: true
}
})
这个时候数据默认是存在sessionStorage 里,如果想把数据存储到localStorage,则需要修改如下:
persist: {
enabled: true,
strategies: [
{
key: 'userInfo',//设置存储的key
storage: localStorage,//表示存储在localStorage
}
]
}
默认所有 state 都会进行缓存,如果你不想所有的数据都持久化存储,那么可以通过 paths 指定要长久化的字段,其余的字段则不会进行长久化,如下:
persist: {
enabled: true,
strategies: [
{
storage: localStorage,
paths: ['id'],//指定要长久化的字段
}
]
}