Vue3：状态管理 Vuex 4.x

在组件中开发者可以通过 dispatch 调用 Action 类型的方法执行异步操作，当异步操作执行完成后，在 Action 方法中可以通过 commit 调用 mutation 类型的方法修改状态，当状态被修改以后，视图更新。

import { createStore } from "vuex";

export default createStore({
    // 用于存储应用状态（store.state）
    state: {},
    // vuex中的计算属性（store.getters）
    getters: {},
    // 用于执行同步操作，修改state中的存储的应用状态（commit）
    mutations: {},
    // 用于执行异步操作，不能在此处直接修改状态。
    actions: {},
    // 模块，用于对状态进行文件拆分。
    modules: {},
});

state

在组件中获取 state 数据。

import { useStore } from "vuex";

export default {
    setup () {
        // 1.创建store实例
        const store = useStore();
        
        // 2.通过store.state获取
        const username = store.state.username;
    }
}

getters

getters 是 vuex 中的计算属性，基于现有状态计算出新的状态。

• 注意：getters 中的方法一定要 return。

// store/index.js

import { createStore } from "vuex";

export default createStore({
    state: {
        username: "张三",
    },
    ...
    getters: {
        newUsername (state) {
            return state.username + "同学";
        };
    },
    ...
});

// App.vue

import { useStore } from "vuex";

export default {
    setup () {
        // 1.创建store实例
        const store = useStore();
        
        // 2.通过stre.getters获取
        const username = store.getters.newUsername;
    }
}

mutations

// store/index.js

import { createStore } from "vuex";

export default createStore({
    state: {
        username: "张三",
    },
    ...
    getters: {
        // 修改名字
        newUsername (state) {
            return state.username + "同学";
        };
    },
    mutations: {
		// 更新名字
        updateUsername (newName) {
			state.username = newName;
        }
    }
    ...
});

<template>
	<button @click="onClickHandler("李四")">点击修改名字</button>
</template>

<script>
import { useStore } from "vuex";

export default {
    setup () {
        // 1.创建store实例
        const store = useStore();
        
        // 2.点击事件更新名字
        const onClickHandler = (name) => {
            store.commit('updateUsername', name);
        }
    }
}
</script>

actions

actions 在 Vuex 中用于执行异步操作，当一步擦欧洲哦执行完成以后可以通过 ctx.commit 调用 mutations 方法来修改应用状态。

// store/index.js

import { createStore } from "vuex";

export default createStore({
    state: {
        username: "张三",
    },
    actions: {
        // 异步更新名字
        updateName(ctx) {
            setTimeout(() => {
                ctx.commit("updateName", "李四");
            }, 1000);
        };
    },
    mutations: {
        // 更新名字
        updateName(newName) {
            state.username = newName;
        };
    }
    ...
});

<!-- 组件调用 -->
<template>
	<button @click="onClickHandler">点击按钮更新名字</button>
</template>

<script>
export default {
    setup() {
        const onClickHandler = () => {
            // 调用actions方法
            store.dispatch("updateName")
        };
        
        return { onClickHandler };
    }
}
</script>

modules

写法一：直接在index中定义模块。

// store/index.js
import { createStore } from "vuex";

const users = {
    namespaced: true,
    state () {
        return {
           	name: "用户模块",
        }
    }
}

export default createStore({
    modules: { users }
});

写法二：拆分不同的文件定义模块。

1. 定义模块

// store/users.js
import { createStore } from "vuex";

const users = {
    namespaced: true,
    state () {
        return {
           	name: "用户模块",
            username: "张三",
        }
    }
}

export default createStore({
    modules: { users }
});

2. 引入模块

// store/index.js
import { createStore } from "vuex";

import users from "./users.js";
import cart from "./cart.js";

export default createStore({
    modules: { users, cart }
});

3. 使用模块

<template></template>

<script>
import { useStore } from "vuex";

export default {
    setup() {
        // store实例
        const store = useStore();
        
        // state属性
        store.users.state.username;
        
        // getters 计算属性
        store.getters.
        
        // actions 异步方法
        
        // mutations 
    }
}
</script>