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/[email protected]/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 you have read our privacy policy.

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