Vue.js — vuex的基本使用

注意：本文使用的是 vue3.0 + vuex4.0 的写法。

一、创建一个 store 文件

import { createStore } from 'vuex';

// 模拟请求数据
function getUserInfo() {
    return new Promise((resolve) => {
        resolve({ name: '张三' })
    });
}

const store = createStore({
	// 相当于 vue 中的 data，存放变量
    state() {
        return {
            userInfo: {}
        }
    },
    // 计算属性，对 state 中的变量进行处理
    getters: {
        userName(state) {
            return state.userInfo.name;
        }
    },
    // 更改 store 中的状态的唯一方式
    mutations: {
        setUserInfo(state, value) {
            state.userInfo = value;
        }
    },
    /*
    action 提交的是 mutation，而不是直接变更状态。
    action 可以包含任意异步操作
    */
    actions: {
        async getUserInfo({ commit }) {
            const userInfo = await getUserInfo();
            commit('setUserInfo', userInfo)
        }
    },
});

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

app.mount('#app')

三、组件中使用数据

1、在 app.vue 中去调用 action 中的方法请求异步数据

<script>
import { mapActions } from 'vuex';

export default {
    created() {
    	/*
    	1、通过 this.$store.dispatch('xxx') 方式调用
    	2、使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用
    	*/
    	this.$store.dispatch('getUserInfo');
        // this.getUserInfo();
    },
    methods: {
        ...mapActions(['getUserInfo']),
    }
}
</script>

2、然后在任意组件中就可以使用存储的数据了

<template>
    <div>{{ userName }}</div>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex';

export default {
    computed: {
        ...mapState(['userInfo']),
        ...mapGetters(['userName']),
    },
}
</script>