1

Как обновить переменную в компоненте из store? в модалке записываю в стор выбранную категорию вот так

getCategory(category) {
      this.$store.commit('categories/SELECT_CATEGORY', category)
    },

сам store categories.js

export const state = () => ({
  categories: [],
  category: [],
})

export const mutations = {
  SELECT_CATEGORY(state, category) {
    state.category = category
  },
}

как в другом компоненте обновить переменю category_id в data()

data(){
  return{
     category_id: 0
  }
}

1 ответ 1

1

Используйте category_id как вычисляемое свойство, которое будет полагаться на значение из getters для store (это позволит реактивно обновлять значение переменной при обновлении ее значения в store):

computed: {
 ...mapGetters(['GET_SELECTED_CATEGORY']),
 category_id(){
   return this.GET_SELECTED_CATEGORY
 }
},

В сочетании с вспомогательной функцией mapGetters и вспомогательной функцией mapMutations вы можете использовать следующий пример:

const store = new Vuex.Store({
  state: {
    categories: [],
    category: [],
  },
  getters: {
    GET_SELECTED_CATEGORY: (state) => {
      return state.category
    },
  },
  mutations: {
    SELECT_CATEGORY(state, category) {
    state.category = category
  },
  },
})

const {
  mapGetters,
  mapMutations
} = Vuex

new Vue({
  el: '#app',
  store,
  computed: {
    ...mapGetters(['GET_SELECTED_CATEGORY']),
    category_id(){
      return this.GET_SELECTED_CATEGORY
    }
  },
  methods: {
    ...mapMutations(['SELECT_CATEGORY']),
    getCategory(e) {
      this.SELECT_CATEGORY(e.target.value)
    }
  },
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://unpkg.com/vuex@3.3.0/dist/vuex.js"></script>
<div id="app">
  category_id = {{ category_id }}
  <hr>
  <select @change="getCategory">
    <option value="category1">category1</option>
    <option value="category2">category2</option>
    <option value="category3">category3</option>
  </select>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.