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

Question

我在我的网络应用程序中创建了一个通用商店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并未清空 - 它仍然包含所有产品。我想这就是它应该如何工作，但我的问题是：是否安全/最佳实践每个商店只有一个州，还是我可以接受一个商店有多个州？

Answer 1

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

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

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

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

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

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

因此，就像您可能有多个data商品或methods在一个组件中一样，您也可能有多个state商品或actions在商店中，这是预期的。如果您确实想细分商店并将某些部分专用于某些目的或功能以便于管理，您也可以使用Vuex 模块来做到这一点，但它仍然是全局的。