1、main.js注册pinia
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { createPinia } from 'pinia'
const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
app.mount('#app')
2、定义pinia仓库
// 1、定义状态容器
// 2、修改容器中的state
// 3、仓库中的action的使用
import { defineStore } from "pinia";
import { AMStore } from "./AM";
// defineStore参数1为仓库名称(唯一值)
export const mainStore = defineStore('main', {
state: () => {
return {
hello: 'hello world',
count: 1,
phone:15174338909
}
},
getters: {
phoneHidden(){
return this.phone.toString().replace(/^(\d{3})\d{4}(\d{4})$/,'$1****$2')
}
},
actions: {
changeState () {
this.count = this.count + 4
this.hello = '第四种'
this.phone ='15090124212'
},
getList() {
console.log(AMStore().list,'AMStore().list');
}
}
})
3、读取状态 tip:(解构出的pinia状态为非响应式,需要使用storeToRefs方法变为响应式)
<template>
<div>
{{ hello }}
{{count}}
</div>
</template>
<script setup>
import { storeToRefs } from "pinia";
import { mainStore } from '../store/index'
// 读取pinia状态
const {hello,count} = storeToRefs(mainStore())
</script>
4、修改pinia状态的方式()
<template>
<div>
<button @click="handleClick">修改状态数据</button>
<button @click="handleClickPatch">第二种patch</button>
<button @click="handleClickPatchFn">第三种patch改版</button>
<button @click="handleClickAction">第四种action</button>
<button @click="getList">Store的互相调用</button>
</div>
</template>
<script setup>
// 读取pinia状态
import { mainStore } from '../store/index'
const store = mainStore()
// 改变pinia状态的几种方式
// 第一种方法 (也可以多数据改变,但是不推荐)
const handleClick = () => {
store.count++
}
// 第二种方法 (不能写业务逻辑,只能多数据改变,官方推荐(优化过的))
const handleClickPatch = () => {
store.$patch({
count: store.count + 2,
hello: 'AM hello'
})
}
// 第三种方法 (第二种改版,可以写业务逻辑)
const handleClickPatchFn = () => {
store.$patch((state) => {
if (state.count < 15) {
;(state.count = state.count + 3), (state.hello = '第三种')
}
})
}
// 调用第四种方法
const handleClickAction =()=> {
store.changeState()
}
// Pinia中Store的互相调用
const getList =()=>{
store.getList()
}
</script>
5、Pinia中Store的互相调用
// AM store
import { defineStore } from "pinia";
export const AMStore = defineStore('AM', {
state: () => {
return {
list :['小黄','小黑','小白']
}
},
})
// 1、定义状态容器
// 2、修改容器中的state
// 3、仓库中的action的使用
import { defineStore } from "pinia";
import { AMStore } from "./AM";
// defineStore参数1为仓库名称(唯一值)
export const mainStore = defineStore('main', {
state: () => {
return {
hello: 'hello world',
count: 1,
phone:15174338909
}
},
getters: {
phoneHidden(){
return this.phone.toString().replace(/^(\d{3})\d{4}(\d{4})$/,'$1****$2')
}
},
actions: {
changeState () {
this.count = this.count + 4
this.hello = '第四种'
this.phone ='15090124212'
},
getList() {
console.log(AMStore().list,'AMStore().list');
}
}
})
6、调试pinia