什么是 Vuex

Vuex 是 Vue.js 的官方插件，它提供了一个集中式数据存储，可在你的应用程序中使用。它受 Flux 应用程序架构的影响很大，该架构具有单向数据流，可实现更简单的应用程序设计和推理。

在 Vuex 应用程序中，数据存储区保存所有共享应用程序状态。该状态由突变改变，突变是响应于通过调度员调用突变事件的动作而执行的。 ****

下图中概述了 Vuex 应用程序中的数据流示例。 在麻省理工学院许可下使用的图表，最初来自官方 Vuex GitHub 回购 。

各个 Vue.js 应用程序组件可以访问存储对象以通过 getter 检索数据， getter 是返回所需数据的只读副本的纯函数。

组件可以具有操作，这些操作是对组件自己的数据副本执行更改的函数，然后使用调度程序来调度突变事件。然后，此事件由数据存储区处理，数据存储区根据需要更新状态。

然后，变更会自动反映在整个应用程序中，因为所有组件都通过其 getter 被反应绑定到商店。

一个示例说明在 vue 项目中使用 vuex。

const state = {
    lastClickTime: null
}

const mutations = {
    updateLastClickTime: (state, payload) => {
      state.lastClickTime = payload
  }
}

const getters = {
  getLastClickTime: state => {
    return new Date(state.lastClickTime)
  }
}

const actions = {
    syncUpdateTime: ({ commit }, payload) => {
    commit("updateLastClickTime", payload)
  },
  asyncUpdateTime: ({ commit }, payload) => {
    setTimeout(() => {
      commit("updateLastClickTime", payload)
    }, Math.random() * 5000)
  }
}

const store = new Vuex.Store({
  state,
  getters,
  mutations,
  actions
})

const { mapActions, mapGetters } = Vuex;

// Vue 
const vm = new Vue({
    el: '#container',
  store,
  computed: {
      ...mapGetters([
        'getLastClickTime'
    ])
  },
  methods: {
      ...mapActions([
        'syncUpdateTime',
      'asyncUpdateTime'
    ]),
    updateTimeSyncTest () {
        this.syncUpdateTime(Date.now())
    },
    updateTimeAsyncTest () {
        this.asyncUpdateTime(Date.now())
    }
  }
})

和 HTML 模板相同：

<div id="container">
  <p>{{ getLastClickTime || "No time selected yet" }}</p>
  <button @click="updateTimeSyncTest">Sync Action test</button>
  <button @click="updateTimeAsyncTest">Async Action test</button>
</div>

1. 这里状态包含初始化为 null 的 lastClickTime 属性。这种默认值的设置对于保持属性具有反应性非常重要。州内未提及的属性将可用，但此后所做的更改将无法使用 getter 访问。

2. 使用的 getter 提供了一个计算属性，每次突变更新 state 属性的值时都会更新。

3. 只允许突变改变状态及其属性，即只有同步才能实现。

4. 可以在异步更新的情况下使用 Action，其中 API 调用（此处由随机定时的 setTimeout 模拟）可以在操作中进行，并且在获得响应之后可以提交变异，以进行状态更改。