Mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type)*和一个*回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

import { createStore } from 'vuex'
interface IAdmin {
    id: number
    adminName: string
}
export interface IState {
    admin: IAdmin
}
const state: IState = {
    admin: { adminName: "yuemaedu", id: 1 } as IAdmin
}
const getters = {
    getAdmin(state?: IState) {
        return state?.admin
    },
    isAdmin: (state?: IState) => (id: number) => {
        return id === state?.admin.id
    }
}
const mutations = {
    login(state: IState, admin: IAdmin) {
        state.admin = admin
    }
}
const store = createStore({
    state: state,
    getters: getters,
    mutations: mutations
})

export default store

定义mutations

这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数

const mutations = {
    login(state: IState, admin: IAdmin) {
        state.admin = admin
    }
}

注册

const store = createStore({
    state: state,
    getters: getters,
    mutations: mutations
})

使用

commit 提交

     const login = () => {
            store.commit('login', { adminName: '跃码教育', id: 1 })
        }

vuex 响应式

<template>
    {{ store.state.admin }}
    {{ admin }}
    {{ getAdmin }}
    {{ isAdmin }}
    <a-button type="primary" @click="login">登录</a-button>
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue'
import { useStore } from 'vuex';
import { IState } from '../../store';

export default defineComponent({
    setup() {
        const store = useStore<IState>()
        const admin = computed(() => store.state.admin)
        const getAdmin = computed(() => store.getters.getAdmin)
        const isAdmin = computed(() => store.getters.isAdmin(1))

        const login = () => {
            store.commit('login', { adminName: '跃码教育', id: 1 })
        }
        return {
            store,
            admin,
            getAdmin,
            isAdmin,
            login
        }
    },
})
</script>

computed

     const admin = computed(() => store.state.admin)
        const getAdmin = computed(() => store.getters.getAdmin)
        const isAdmin = computed(() => store.getters.isAdmin(1))
        
        
        
     return {
            admin,
            getAdmin,
            isAdmin,
            login
        }

直接在模板中使用store

    {{ store.state.admin }}

const store = useStore<IState>()
        return {
            store,
        }