Vue 开发技巧（五）

使用状态管理：状态管理可以帮助维护应用的状态，提高代码的可维护性

// store.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')
    }
  }
})

// App.vue
<template>
  <div>
    {{ count }}
    <button @click="increment">+</button>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  computed: {
    count () {
      return this.$store.state.count
    }
  },
  methods: {
    ...mapActions(['increment'])
  }
}
</script>

store.js 文件是 Vuex 的 store。

state 对象存储了应用的状态，在这个示例中，只有一个 count 字段。
mutations 对象定义了对状态的修改方法，在这个例子中只有一个 increment 方法，用于将 count 加 1。

actions 对象定义了对状态的异步修改方法，在这个例子中只有一个 increment 方法，它调用了 commit 函数来触发一个 increment 的 mutation。

App.vue 文件是应用的主组件。

计算属性 count 返回了 store 中的 count 状态。

mapActions 函数从 vuex 中导入，它将 store 中的 actions 映射到组件的 methods 中，这样可以在组件内部直接调用这些 actions。

组件的模板部分显示了 count 和一个 + 按钮，按钮点击时触发 increment action。