vue3的状态管理
2022-11-07 本文已影响0人
姜治宇
vue3的状态管理比较简单,摒弃了繁琐的vuex,改用肥肠好用的pinia。
声明store
在根路径新建一个store文件夹,然后创建一个index.ts:
import {createPinia} from 'pinia'
const store = createPinia()
export default store
然后在main.js引用一下。
import { createApp } from 'vue'
import App from './App.vue'
import store from '@/store'
const app = createApp(App)
app.use(store) //引用store
app.mount('#app')
创建业务state
我们可以根据业务划分相关state,然后单独创建相关的ts文件。比如用户信息相关的状态,我可以在store文件夹下新建一个user.ts:
import {defineStore} from 'pinia'
const userInfo = defineStore({
id:'user',
state:()=>{
return {
name:'',
sex:0,
interest:null
}
},
actions:{
setUserInfo(data:any){
this.name = data.userName;
this.sex = data.userSex;
this.interest = data.userInterest;
},
async getUserInfo(){
const data = await new Promise(resolve=>{
setTimeout(()=>{
resolve({userName:'jack',userSex:1,interest:['reading','football']})
},1000)
})
this.setUserInfo(data)
}
}
})
export default userInfo
actions同步和异步都支持,简单明了,这也是优于vuex的地方;访问的时候还是跟之前一样,直接访问state即可。
使用
建好了业务state,我们就可以在组件下使用了。
<template>
<div class="greetings">
<span v-if="user.name">{{userStates.name}}--{{userStates.sex}}</span>
</div>
</template>
<script setup lang="ts">
import userInfo from '../store/user'
const userStates = userInfo()
userStates.getUserInfo() //异步函数,注意前面不要加await
</script>