pinia的优点
1.vue3、vue2、都支持
2.抛弃了Mutations的操作,只有state、getters和actions
3.不需要嵌套模块,符合vue3的Composition api
4.完整的typescript支持
5.代码更加简洁
挂载pinia
在main.ts
import { createApp } from 'vue' import App from './App.vue' import router from './router' import {createPinia} from 'pinia' import './assets/main.css' const app = createApp(App) const pinia=createPinia() app.use(router) app.use(pinia) app.mount('#app')
新建store的仓库
//定义状态容器和数据 //修改容器中的store //仓库中的action的使用 import { defineStore } from 'pinia' export const mainStore = defineStore('main', { state: () => { return { helloworld:'hello world!' } }, getters: {}, actions: {}, })
在页面中引入store
import {mainStore}from '../store/index.ts' const store=mainStore()
<h1>{{store.helloworld}}</h1>
在处理状态的action时,有多种方式
第一种:在引入store页面中,直接给button加上点击事件,直接给store.xxx进行修改
<h1 @click="changtxt">{{store.helloworld}}</h1> const changtxt=()=>{ store.helloworld='welcome to pinia' }
第二种,在引入store页面中,给button加上点击事件,通过在store.$patch中进行修改
<h1 @click="changtxt">{{store.helloworld}}</h1> <h2 >{{store.name}}{{store.age}}</h2> const changtxt=()=>{ console.log('111'); store.$patch({ helloworld:store.helloworld='welcome to pinia', name:'刘备', age:44 }) }
第三种
const changtxt=()=>{ store.$patch((state)=>{ state.helloworld='welcome to pinia'; state.name='关羽'; state.age=44 }) }
第四种,使用store中的actions中定义的行为
import { defineStore } from 'pinia' export const mainStore = defineStore('main', { state: () => { return { helloworld: 'hello world!', age: 10, name:'jack' } }, getters: {}, actions: { changeState() { this.age = 100, this.name = '赵云', this.helloworld='三国' } }, })
const changtxt=()=>{ store.changeState(); }
getters的使用
用例说明:使用store的getters获取数据,在更改数据之后,还会自动调用getters中的函数
import { defineStore } from 'pinia' export const mainStore = defineStore('main', { state: () => { return { helloworld: 'hello world!', age: 10, name: 'jack', phone:'12345678912' } }, getters: { phoneHidden(state) { return state.phone.toString().replace(/^(\d{3})\d{4}(\d{4})$/,'$1****$2') } }, actions: { changeState() { this.age = 100, this.name = '赵云', this.helloworld='三国' } }, })
<h1>{{store.phoneHidden}}</h1> <button @click="changePhone">改变电话号码</button> const changePhone=()=>{ store.phone='22222222222' }
获取其他store的数据
1.通过actions获取
actions: { changeState() { this.age = 100, this.name = '赵云', this.helloworld='三国' }, getOtherList() { console.log(otherStore().list); } },
2.通过getters获取
getters: { phoneHidden(state) { return state.phone.toString().replace(/^(\d{3})\d{4}(\d{4})$/,'$1****$2') }, //获取其他store的getter otherGetter(state) { return otherStore().name } },
标签:const,name,helloworld,state,pinia,store From: https://www.cnblogs.com/shuchenhao/p/16954991.html