vue.js - 我可以在 Vuex 存储中拥有多个状态吗？

Question

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

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 状态并未清空 - 它仍然包含所有产品。我想这就是它应该如何工作的，但是我的问题是:每个商店只有一个状态是否安全/最佳实践，或者我可以在商店中有多个状态吗？

Answer 1

想想Vuex就像没有模板或 UI 的全局组件；只是一个使其数据可供所有其他组件访问的组件。 Vuex 存储为组件提供了一种通过将其放在一个位置来共享“组件内容”(数据和行为)的方法。

当您希望多个不相关的组件拥有不特定于其中任何一个的数据时，这一点特别有用。例如，登录的用户名。最好将其放在一个位置，而不是重复它并尝试将其传递到显示它或用它执行某些操作的每个组件。他们都可以直接去商店取货。

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

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

• 状态只是数据
• getters 只是计算的
• actions 只是方法

从概念上讲，这就是全部。主要区别在于，在 Vuex 中，您不会在 mutations 之外更改 state。

就像组件中可能有多个data项或方法一样，您也可能有多个state项或actions 在商店里，这是预期的。如果您确实想分割商店并将某些部分专用于某些目的或功能以便于管理，您也可以使用Vuex modules来做到这一点，但这仍然是全局性的。