Ответы пользователя по тегу Vuex
  • Стоит ли использовать Vuex для передачи данных между компонентами?

    bootd
    @bootd
    Гугли и ты откроешь врата знаний!
    Компоненты не должны общаться между собой, только в крайнем на то случае.
    Компоненты должны выкидывать события(emit), что бы можно было получать в родителе какие-то данные и прокидывать данные в сам компонент(props). Компоненты должны быть независимыми, за исключением каких-то UI компонентов, где могут существовать зависимости ребёнка от родителя.

    Если у вас большой проект, vuex очень удобен. Т.к. позволяет выделить отдельный слой для работы с данными API.
    Если у вас маленький проект, то тут на своё усмотрение.

    Vuex нужно использовать как некое централизованное хранилище данных, своего рода база данных для клиента.
    А так же, когда у вас есть места в приложении, которым нужно обращаться к некоему глобальному хранилищу, для получения данных, пример о том, авторизован пользователь или нет, что бы отображать те или иные части сайта.

    Моё мнение, что лучше использовать Vuex всегда, если вы работаете с API, не все будут согласны с этим. Но его использование делает проще понимание проекта, чем без. Если у вас просто маленький блок на сайте, который просто реализует какую-то небольшую задачу, редактор какой нибудь, опрос, или ещё что-то, vuex не нужен.

    P.S. С vuex нужно уметь работать. Если вы просто будете из vuex получать данные внутри каждого компонента, кашу вы не сварите.
    Ответ написан
    Комментировать
  • Как в компоненте вывести загруженные данные?

    bootd
    @bootd
    Гугли и ты откроешь врата знаний!
    // store
    export const state = () => ({
    	functions: []
    });
    
    export const actions = {
      async loadFunction({ commit }) {
        try {
          const plans = await Parse.Cloud.run('getFunction', {}, {});
          commit('setFunction', plans);
        } catch (error) {
          commit('setFunction', null);
          return null;
        }
      },
    };
    
    export const mutations = {
    	setFunction: (state, payload) => {
    		state.functions = payload;
    	}
    }


    // Ваш копонент, где вы отображаете TItem
    <template>
    	<div>
    		<TItem
              v-for="(item, index) in functions"
              :key="index"
              :tplan="item"
              @delete="deleteItem(index)"
            />
    	</div>
    </template>
    
    <script>
    import { mapState } from 'vuex'
    
    export default {
    	//....
    	computed: {
    		...mapState([
    			'functions'
    		])
    	}
    	//...
    }
    </script>
    Ответ написан
    Комментировать
  • Почему у меня в store ничего нет?

    bootd
    @bootd
    Гугли и ты откроешь врата знаний!
    Это
    if (store.copters['copters/copters'].length === 0) {


    заменить на это
    if (store.getters['copters/copters'].length === 0)
    Ответ написан
  • Как в компоненте подписаться на изменение state во Vuex?

    bootd
    @bootd
    Гугли и ты откроешь врата знаний!
    <template>
      <div>
        {{ myProp }}
      </div>
    </template>
    
    import { mapState } from 'vuex'
    
    export default {
      computed: {
        ...mapState([
          'myProp',
        ]),
      },
      watch: {
        myProp () {
          this.myMethod()
        },
      },
      methods: {
        myMethod () {
          console.log('Hello, world!')
        },
      },
    }
    Ответ написан
    4 комментария
  • Как обратиться к state из action?

    bootd
    @bootd
    Гугли и ты откроешь врата знаний!
    ну так из контекста получите его
    async fetchPosts( { commit, state }, page ) {
    Ответ написан
    Комментировать
  • Почему в action не передается второй параметр?

    bootd
    @bootd
    Гугли и ты откроешь врата знаний!
    Потому что экшены не умеют принимать 100500 параметров. Параметр должен быть 1 - объект с 100500 свойствами.

    P.S. Я хз почему так происходит, баг это или фича, но это так. В глубинку я не залазил и не изучал. У меня есть догадки лишь, связанные с тем, что 1й аргумент всегда зарезервирован под стор. Да и объектами выглядит лучше, не нужно порядок соблюдать и их можно так же удобно как и аргументы вывести
    updateQuantity: ({commit}, {lalala, id}) => {
                commit('setData', {lalala, id});
            }
    Ответ написан
    Комментировать
  • Как использовать mapActions с помощью этого удобного способа?

    bootd
    @bootd
    Гугли и ты откроешь врата знаний!
    ...mapActions({
    setUser: 'user/setUser'
    }),
    Ответ написан
    1 комментарий
  • Как в компоненте vue вывести геттер из хранилища?

    bootd
    @bootd Автор вопроса
    Гугли и ты откроешь врата знаний!
    Вопрос решён. Меня мучал один вопрос, как вот этот код поймёт, что нужно идти в модуль стора cart.js
    import { mapGetters } from 'vuex'
    
    export default {
      name: 'CartInfoBox',
      computed: {
        ...mapGetters([
          'totalCount',
          'totalPrice'
        ])
      }
    }

    Оказалось всё просто, нужно указать имя этого модуля и в итоге получилось так:
    import { mapGetters } from 'vuex'
    
    export default {
      name: 'CartInfoBox',
      computed: {
        ...mapGetters('cart', [
          'totalCount',
          'totalPrice'
        ])
      }
    }
    Ответ написан
    Комментировать