vue2 vuex

// src/store/index.js

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++;
    }
  },
  actions: {
    increment ({ commit }) {
      commit('increment');
    }
  },
  getters: {
    count: state => state.count
  }
});

// src/main.js

import Vue from 'vue';
import App from './App.vue';
import store from './store';

new Vue({
  store,
  render: h => h(App)
}).$mount('#app');

// src/components/Counter.vue

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  computed: {
    count () {
      return this.$store.getters.count;
    }
  },
  methods: {
    increment () {
      this.$store.dispatch('increment');
    }
  }
};
</script>

解释说明：

1. Vuex Store:

   • state: 存储应用的状态，这里是一个简单的计数器 count。
   • mutations: 定义了如何修改状态，increment 方法将 count 增加 1。
   • actions: 提交 mutations 的方法，可以包含异步操作。这里的 increment 动作提交了 increment mutation。
   • getters: 类似于计算属性，用于获取状态的衍生值，这里是直接返回 count。

2. Main Entry:

   • 在 main.js 中，创建了一个 Vue 实例，并将 Vuex store 注入到 Vue 实例中。

3. Component:

   • Counter.vue 是一个简单的组件，展示了当前的 count 并提供了一个按钮来触发 increment 操作。
   • 使用 computed 属性从 store 中获取 count，使用 methods 触发 increment action。

这样就完成了一个简单的 Vue 2 + Vuex 的计数器应用。