javascript - 如何使用 vuex 模块化复杂 View

Question

使用 vuex 几个月后，我不确定我是否以正确的方式使用它。

我的主要问题是，我应该如何模块化状态？

例如:

我有一个创建和编辑资源(帖子)的 View 。要创建或更新帖子，我需要一些 API 调用来获取一些数据(例如所有可用类别和标签的列表)。 我应该将它们存储在哪里？在 vuex/modules/post.js 中？ 或者在像 vuex/modules/tags.js 这样的专用模块中vuex/moduels/categories.js？

我将帖子的标签和类别存储在 vuex/modules/post.js 中，但是修改资源所需的所有其他资源怎么样(例如所有可用的标签和类别)由用户选择)？

帖子列表怎么样？我应该将帖子列表存储在 vuex/modules/post 中还是专用的 vuex/modules/posts-list.js 中？

每个 View 都应该有自己的模块吗？

//vuex/modules/post.js

import Vue from 'vue';
import Axios from 'axios'

export default {
    namespaced: true,
    state: {
        title: null,
        slug: null,
        tags: [],
        categories: [],
        meta: {},
        excerpt: null,
        content: null,
        comments: []
    },
    mutations: {
        SET_TITLE(state, title) {
            state.title = title;
        },
        SET_SLUG(state, slug) {
            state.slug = slug;
        },
        SET_EXCERPT(state, excerpt) {
            state.excerpt = excerpt;
        },
        SET_CONTENT(state, content) {
            state.excerpt = content;
        },


        ADD_TAG(state, tag) {
            state.tags.unshift(tag)
        },
        REMOVE_TAG(state, index) {
            Vue.delete(state.tags, index);
        },
        SET_TAGS(state, tags) {
            state.tags = tags;
        },


        ADD_CATEGORY(state, category) {
            state.categories.unshift(category)
        },
        REMOVE_CATEGORY(state, index) {
            Vue.delete(state.categories, index);
        },
        SET_CATEGORIES(state, categories) {
            state.categories = categories;
        },


        ADD_META(state, {key, value}) {
            Vue.set(state.meta, key, value)
        },
        REMOVE_META(state, key) {
            Vue.delete(state.meta, key);
        },
        UPDATE_META(state, {key, value}) {
            state.meta[key] = value;
        },
        SET_META(state, meta) {
            state.meta = meta;
        }
    },
    actions: {
        save({state}) {
            Axios.post('http://myapi.com/posts', state);
        },
        async load({commit}, id) {
            const {data} = await Axios.get(`http://myapi.com/posts/${id}`);
            commit('SET_TITLE', data.title);
            commit('SET_SLUG', data.slug);
            commit('SET_EXCERPT', data.excerpt);
            commit('SET_CONTENT', data.content);
            commit('SET_TAGS', data.tags);
            commit('SET_CATEGORIES', data.categories);
            commit('SET_META', data.meta);
        }
    }
}

Answer 1

这完全取决于你。我会将所有域相关数据(例如帖子标签、类别、帖子本身)存储在专用模块中。但是如果我有另一个域(例如产品)，我将创建另一个模块(products.js)，它有自己的标签、类别等。

感谢 Vuex 命名空间模块，您可以清楚地知道要访问哪些标签:

// get post tags
this.$store.getters["post/tags"];
{ ...mapGetters("post", ["tags"]) }

// get products tags
this.$store.getter["products/tags"];
{ ...mapGetters("products", ["tags"]) }