我可以在 Vuex 商店中拥有多个状态吗？答案

【问题标题】：Can I have multiple states in a Vuex store?我可以在 Vuex 商店中拥有多个状态吗？
【发布时间】：2020-03-22 19:40:05
【问题描述】：

我在我的网络应用程序中为Products 创建了一个通用商店。自然，网站需要在不同页面上显示非常多不同类型的产品。所以我最终得到了多个状态来代表每个状态。这是我的商店：

const state = {
    HomepageOffers:[],
    Product: []
};

const getters = {
    getHomepageOffers: (state) => state.HomepageOffers,
    getProduct: (state) => state.Product

};

const actions = {
    loadHomepageOffers({commit}) {          // get all products to be featured on homepage
        axios.get('/api/homepageoffers')
            .then(response => {
                commit('setHomepageOffers', response.data[0])
            }).catch(function (error) {
                console.log(error.response.data);
            }
        )
    },
    loadProduct(context, {ProductID}) {    // gets a single product based on ProductID passed in URL
        axios.get(`/api/${ProductID}`)
            .then(response => {
                context.commit('setProduct', response.data[0])
            }).catch(function (error) {
                console.log(error.response.data);
                console.log(error.response.status);
                console.log(error.response.headers);
            }
        )
    }
};

const mutations = {
    setHomepageOffers(state, HomepageOffers) {
        state.HomepageOffers = HomepageOffers
    },
    setProduct(state, Product) {
        state.Product = Product
    }
};

export default {
    state: state,
    getters: getters,
    actions: actions,
    mutations: mutations
}

发生的情况是，当用户访问我的/home 页面时，HomepageOffers 状态会填满产品数据。伟大的。

当用户点击特定产品时，Product 状态会被单个产品项填充，然后 /Product.vue 组件会被加载。也很棒。

我唯一注意到的是，当获取单个产品时，HomepageOffers 状态并未清空 - 它仍然包含所有产品。我想这就是它应该如何工作，但我的问题是：是每个商店只有一个状态是安全/最佳做法，还是我可以在商店中有多个状态？

【问题讨论】：

您可以根据需要在商店中拥有任意数量的状态 - 您甚至可以将它们相互嵌套。
但是这样做安全吗？我最终会遇到内存/资源问题吗？我不明白 vuex 的实际工作原理......
把 Vuex 想象成一个大的 JavaScript 对象，它可以从应用程序的任何地方访问——就像你有 $root.myStore 对象一样。
是的，它是正确的用法。你总是可以做一个突变来清除你想要的状态。好的做法是不要把不需要的东西放在店里。

标签： vue.js vuejs2 vuex vuex-modules

【解决方案1】：

把Vuex想象成一个没有模板或UI的全局组件；只是一个使所有其他组件都可以访问其数据的方法。 Vuex 商店为组件提供了一种共享“组件内容”（数据和行为）的方式，只需将其放在一个位置即可。

当您希望多个不相关的组件具有不特定于其中任何一个的数据时，这尤其有用。例如，登录的用户名。将它放在一个地方会很好，而不是复制它并尝试将它传递给显示它或使用它做某事的每个组件。他们都可以直接去商店取回。

任何时候您需要在没有父/子关系且无法emit 事件或相互传递道具的组件之间共享数据时，您可能拥有全局数据。可能组件位于不同的路由或不同的部分等。使用 Vuex，它们都可以从单一来源访问全局信息和方法。

考虑到这种比较，Vuex“组件”变得易于理解，但名称不同：

state 只是 data
getters 只是 computed
actions 只是 methods

从概念上讲，仅此而已。主要区别在于，在 Vuex 中，您不会在 mutations 之外更改 state。

就像您在一个组件中可能有多个 data 项目或 methods 一样，您可能在商店中有多个 state 项目或 actions，这是意料之中的。如果您确实想要细分商店并将某些部分专门用于某些目的或功能以便于管理，您也可以使用 Vuex modules 来实现，但它仍然是全局的。

【讨论】：