目录
核心概念-Actions续集
解构赋值响应式
Pinia热更新
核心概念-插件
核心概念-插件-本地存储
Pinia的数据持久化插件
核心概念-Actions续集
actions 可以是异步的，这也是使用 actions 最大的原因
传递参数
import { defineStore } from "pinia"
export const useCountStore = defineStore("count", {
state: () => {
return {
count: 10,
banner:[]
}
},
actions: {
increment(num) {
this.count += num
},
decrement(num) {
this.count -= num
}
}
})组合式API
<template>
<h3>Pinia</h3>
<p>Count1:{{ store.count }}</p>
<button @click="addCountHandler">增加</button>
<button @click="minCountHandler">减少</button>
</template>
<script setup>
import { useCountStore } from "../store/count"
const store = useCountStore();
function addCountHandler(){
store.increment(5)
}
function minCountHandler(){
store.decrement(5)
}
</script>选项式API
<template>
<p>Count2:{{ count }}</p>
<p>Count2:{{ doubleCount }}</p>
<button @click="addCountHandler">增加</button>
<button @click="minCountHandler">减少</button>
</template>
<script>
import { mapState,mapActions } from "pinia"
import { useCountStore } from "../store/count"
export default {
computed:{
...mapState(useCountStore,{
myOwnName:"count",
count:store => store.count,
doubleCount(store){
return store.count * 2
}
})
},
methods:{
...mapActions(useCountStore,["increment","decrement"]),
addCountHandler(){
this.increment(10)
},
minCountHandler(){
this.decrement(20)
}
}
}
</script>异步操作
import { defineStore } from "pinia"
import axios from "axios"
export const useBannerStore = defineStore("banner", {
state: () => {
return {
banner:[]
}
},
actions: {
setBanner(url){
axios.get(url)
.then(res =>{
this.banner = res.data.banner
}).catch(error =>{
console.log(error);
})
}
}
})<template>
<h3>网络请求</h3>
<ul>
<li v-for="(item,index) in store.banner" :key="index">
<h3>{{ item.title }}</h3>
<p>{{ item.content }}</p>
</li>
</ul>
</template>
<script setup>
import { onMounted } from "vue"
import { useBannerStore } from "../store/banner"
const store = useBannerStore();
onMounted(() =>{
store.setBanner("http://iwenwiki.com/api/blueberrypai/getIndexBanner.php")
})
</script>解构赋值响应式
如果直接从 pinia
import { defineStore, acceptHMRUpdate } from "pinia"
export const useCountStore = defineStore("count", {
state: () => {
return {
count: 10
}
},
actions: {
increment(num) {
this.count += num
},
decrement(num) {
this.count -= num
}
}
})<template>
<h3>Pinia</h3>
<p>{{ count }}</p>
<button @click="addCountHandler">增加</button>
<button @click="minCountHandler">减少</button>
</template>
<script setup>
import { useCountStore } from "../store/count"
const store = useCountStore();
const { count } = store
function addCountHandler(){
store.increment(5)
}
function minCountHandler(){
store.decrement(5)
}
</script>上述代码，我们操作加减的时候会发现，内容根本不会发生变化， 这就是我们使用解构赋值之后，失去了响应式,我们可以用 storeToRefs
<template>
<h3>Pinia</h3>
<p>{{ count }}</p>
<button @click="addCountHandler">增加</button>
<button @click="minCountHandler">减少</button>
</template>
<script setup>
import { storeToRefs } from "pinia"
import { useCountStore } from "../store/count"
const store = useCountStore();
const { count } = storeToRefs(store)
function addCountHandler(){
store.increment(5)
}
function minCountHandler(){
store.decrement(5)
}
</script>Pinia热更新
pinia 支持热模块替换，因此你可以编辑store，并直接在您的应用程序中与它们交互，而无需重新加载页面，允许您保持现有的状态， 添加，甚至删除state，action和getter
import { defineStore, acceptHMRUpdate } from "pinia"
import axios from "axios"
export const useCountStore = defineStore("count", {
state: () => {
return {
count: 10
}
},
getters: {
getCount: (state) => "当前Count：" + state.count
}
})
if (import.meta.hot) {
import.meta.hot.accept(acceptHMRUpdate(useCountStore, import.meta.hot))
}核心概念-插件
由于是底层 API，Pinia Store可以完全扩展，这一扩展就是插件
// 定义仓库
import { defineStore } from "pinia"
export const useCountStore = defineStore("count",{
state:() =>{
return{
count:10
}
}
})// 定义插件
export function piniaStoragePlugins({ store }) {
console.log(store.count)
store.$subscribe(() => {
console.log(store.count)
})
}// 使用插件
import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from "pinia"
import { piniaStoragePlugins } from "./stores/plugins"
const pinia = createPinia()
pinia.use(piniaStoragePlugins)
createApp(App).use(pinia).mount('#app')// 视图操作
<template>
<h3>Pinia插件</h3>
<p>{{ store.count }}</p>
<button @click="addHandler">增加</button>
</template>
<script setup>
import { useCountStore } from "../stores/count"
const store = useCountStore()
function addHandler(){
store.count++
}
</script>核心概念-插件-本地存储
pinia 有个副作用，就是无法持久化，在浏览器刷新重置之后，会全部回复默认，这时候，我们可以利用插件实现本地持久化存储
实现本地存储
// 仓库
import { defineStore } from "pinia"
export const useCountStore = defineStore("count",{
state:() =>{
return{
count:10
}
}
})// 引入仓库
import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from "pinia"
import { piniaStoragePlugins } from "./stores/plugins"
const pinia = createPinia()
pinia.use(piniaStoragePlugins)
createApp(App).use(pinia).mount('#app')// 本地存储
export function setStorage(key,value){
localStorage.setItem(key,value)
}
export function getStorage(key){
return localStorage.getItem(key)
}// 实现插件，本地存储
import { setStorage, getStorage } from "../../utils/storage"
export function piniaStoragePlugins({ store }) {
if (getStorage("count")) {
store.count = getStorage("count")
}else{
setStorage("count", store.count)
}
store.$subscribe(() => {
setStorage("count", store.count)
})
}// 视图
<template>
<h3>Pinia插件</h3>
<p>{{ store.count }}</p>
<button @click="addHandler">增加</button>
</template>
<script setup>
import { useCountStore } from "../stores/count"
const store = useCountStore()
function addHandler(){
store.count++
}
</script>Pinia的数据持久化插件
好用的Pinia缺少持久化插件？ pinia-plugin-persist 即可轻松解决!
安装
npm install --save pinia-plugin-persist引入持久化插件
import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from "pinia"
import piniaPersist from 'pinia-plugin-persist'
const pinia = createPinia()
pinia.use(piniaPersist)
createApp(App).use(pinia).mount('#app')使用持久化插件
import { defineStore } from "pinia"
export const useCountStore = defineStore("count", {
state: () => {
return {
count: 10
}
},
persist: {
enabled: true,
strategies: [
{
key: 'counts', //自定义 Key值
storage: localStorage, //选择存储方式
},
],
}
})
