Могу ли я иметь несколько состояний в магазине Vuex? - PullRequest
Новая
       54

Могу ли я иметь несколько состояний в магазине Vuex?

1 голос
/ 22 марта 2020

Я создал универсальный c магазин для 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 не очищается - в нем по-прежнему есть все продукты. Я предполагаю, что именно так оно и должно работать, но мой вопрос: безопасен ли / лучший метод для только один штат на магазин, или я согласен с несколькими состояниями в магазине?

1 Ответ

2 голосов
/ 23 марта 2020

Думайте о Vuex как о глобальном компоненте без шаблона или пользовательского интерфейса; только тот, который делает его данные доступными для всех других компонентов. Хранилище Vuex предоставляет компонентам возможность совместно использовать «компоненты» (данные и поведение), помещая их в одно место.

Это особенно полезно, когда требуется, чтобы несколько несвязанных компонентов имели данные, которые не указаны c любому из них. Например, вошли в систему имя пользователя. Было бы неплохо иметь это в одном месте, вместо того, чтобы дублировать его и пытаться передать его каждому компоненту, который его отображает или что-то делает с ним. Все они могут go напрямую в хранилище и получить его.

В любое время вам нужно обмениваться данными между компонентами, которые не имеют отношения родитель / потомок и не могут emit события или передавать реквизиты друг к другу, у вас, вероятно, есть глобальные данные. Может быть, компоненты находятся на разных маршрутах или в разных разделах и т. Д. c. С Vuex все они могут получать доступ к глобальной информации и методам из одного источника.

С учетом этого сравнения «компонент» Vuex становится легким для понимания, но с другими именами:

  • state это просто data
  • getters это просто computed
  • actions это просто methods

Это действительно все, концептуально. Основное отличие состоит в том, что в Vuex вы не меняете state вне mutations.

Так же, как у вас может быть несколько data элементов или methods в компоненте, вы можете иметь несколько state предметов или actions в магазине, и это ожидается. Если вы хотите разделить магазин и выделить определенные части для определенных целей или функций для более простого управления, вы можете сделать это также с помощью Vuex modules , но все это по-прежнему глобально.

...