vue3的状态管理

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>