VueX: почему vuex store data не обновляет свойство данных компонентов?

Question

В следующем коде свойство компонентов (app.vue) c2 не обновляется, когда increment счетчик обновлений магазинов this.$store.state.counter++;

Я знаю, что могу решить эту проблему, используя c2 какcomputed свойство, но я хотел бы знать, почему Vuex или vue не инициируют реактивность, поскольку значение счетчика было обновлено методом приращения.

Store.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export const store = new Vuex.Store({
  state: {
    counter: 0
  },
  mutation: {
    increment() {
      return this.$state.counter++;
    }
  }
});

App.vue

<template>
  <div id="app">
    <button @click="increment">Increment</button>
    {{ c2 }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      c2: this.$store.state.counter
    };
  },
  methods: {
    increment() {
      this.$store.state.counter++;
    }
  }
};
</script>

Спасибо

Answer 1

Vuex использует нечто, называемое «действиями», и они выглядят как мутации, но вместо того, чтобы изменять состояние, они совершают мутации. Вы не можете изменить состояние магазина Vuex следующим образом:

methods: {
  increment() {
    this.$store.state.counter++
  }
}

Вместо этого вы должны создать в вашем магазине объект действий с действием:

actions: {
  increment (context) {
    context.commit('increment')
  }
}

Теперь этот код говорит: «всякий раз, когда вы отправляете мне (действие), запускайте код внутри мутации, называемой инкрементом», что означает: «зафиксировать мутацию, называемую инкрементом».

Еще одна важная вещь - это метод компонента, называемый «приращением». Вы должны изменить это так:

methods: {
  increment() {
    this.$store.dispatch('increment')
  }
}

Теперь, когда вы вызываете этот метод, вы отправляете действие, которое совершит мутацию.

Наконец, чтобы получить ваше состояние внутри вашего компонента (по крайней мере, хорошим способом), используйте функцию mapState, которую предоставляет Vuex.

Сначала импортируйте это внутри тега скрипта компонента:

import { mapState } from 'vuex'

И создайте вычисляемое свойство следующим образом:

computed: mapState([
  'counter'
])

Это даст вам доступ к свойству counter, которое было определено внутри вашего магазина. В этом случае вы можете удалить оператор return в функции data() и изменить html, чтобы отобразить свойство counter:

<template>
  <div id="app">
    <button @click="increment">Increment</button>
    {{ counter }}
  </div>
</template>

И это было бы!