Блог

Как вы можете видеть в приведенном ниже коде, у меня есть store.js где я удваиваю свое значение на 2, используя геттеры, но при доступе к нему в результате this.$store.state.doubelCounter; отображается как неопределенный.

У меня есть это store.js для vuex

 import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export const store = new Vuex.Store({
    state: {
        counter: 0
    },
    getters: {
        doubleCounter: state => {
            return state.counter * 2;
        } 
    }
})
  

Это counter.vue :

 <template>
    <div>
        <button class="btn btn-primary" @click="increment">Increment</button>
        <button class="btn btn-primary" @click="decrement">Decrement</button>
    </div>
</template>

<script>
    export default {
        methods: {
            increment() {
                this.$store.state.counter  ;
            },
            decrement() {
                this.$store.state.counter--;
            }
        }
    }
</script>
  

Это result.vue :

 <template>
  <p>Counter is: {{ counter }}</p>
</template>

<script>
export default {
  computed: {
    counter() {
      return this.$store.state.doubelCounter;
    },
  },
};
</script>
  

Во-первых, вы не можете напрямую изменять состояние хранилища. Единственный способ сделать это — зафиксировать мутацию:

 export const store = new Vuex.Store({
  state: {
    counter: 0
  },
  getters: {
    doubleCounter: state => state.counter * 2
  },
  mutations: {
    incrementCounter(state) {
      state.counter  ;
    },
    decrementCounter(state) {
      state.counter--;
    }
  },
})
  

Затем в counter.vue :

 <template>
    <div>
        <button class="btn btn-primary" @click="incrementCounter">Increment</button>
        <button class="btn btn-primary" @click="decrementCounter">Decrement</button>
    </div>
</template>

<script>
  import { mapMutations } from 'vuex';

  export default {
    methods: {
      ...mapMutations(['incrementCounter', 'decrementCounter'])
    }
  }
</script>
  

Во-вторых, чтобы получить доступ к геттеру хранилища, вы должны использовать $store.getters вместо $store.state in result.vue :

 <template>
  <p>Counter is: {{ counter }}</p>
</template>

<script>
export default {
  computed: {
    counter() {
      return this.$store.getters.doubleCounter; // "doubel" typo fixed
    },
  },
};
</script>