web前端

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>
上一篇下一篇

猜你喜欢

热点阅读