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>()