vuex中的state

321 阅读1分钟

State

#单一状态树

Vuex 使用单一状态树——是的,用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。这也意味着,每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照。

初始化state

import { createStore } from 'vuex'
interface IAdmin {
    id: number
    adminName: string
}
interface IState {
    admin: IAdmin
}
const state: IState = {
    admin: { adminName: "yuemaedu", id: 1 } as IAdmin
}
const store = createStore({
    state: state
})

export default store

如何使用我们的state

<template>{{ admin }}</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { useStore } from 'vuex';
import { IState } from '../../store';

export default defineComponent({
    setup() {
        const store = useStore<IState>()
        const admin = store.state.admin
        return {
            admin
        }
    },
})
</script>

组件中引入useStore

     import { useStore } from 'vuex';

     const store = useStore<IState>()