vuex简单解读

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
});

export default store;

// App.vue
<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['count']),
    ...mapGetters(['doubleCount'])
  },
  methods: {
    ...mapMutations(['increment', 'decrement']),
    ...mapActions(['incrementAsync'])
  }
};
</script>

state是Vuex中的状态对象，用于存储应用程序的数据。在state中定义的数据可以在整个应用程序中共享和访问。

mutations是用于修改state中数据的方法。每个mutation都有一个字符串类型的事件类型和一个回调函数。当需要修改state中的数据时，可以通过提交一个mutation来触发回调函数的执行。在回调函数中可以对state中的数据进行修改。 mutations的作用是确保所有对state的修改都是通过提交mutation来进行的，这样可以方便地跟踪和调试数据的变化。同时，由于mutation是同步执行的，所以可以保证在mutation执行完毕后，state中的数据已经被更新，从而避免了数据的不一致性问题。

state用于定义全局变量，mutation用于同步修改全局变量，actions是用于处理异步操作和提交mutations的方法，getters计算属性