Vue.js 什么是Vuex？

示例

Vuex是一个官方插件Vue.js，可为您的应用程序提供一个集中的数据存储库供您使用。它受Flux应用程序体系结构的严重影响，该体系结构具有单向数据流，从而简化了应用程序设计和推理。

在Vuex应用程序中，数据存储区保留所有共享的应用程序状态。通过响应于通过调度程序调用突变事件的动作而执行的突变，可以更改此状态。

下图概述了Vuex应用程序中的数据流示例。根据MIT许可使用的图表，该图表最初来自Vuex官方GitHub存储库。

各个Vue.js应用程序组件可以通过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模拟），并且在获得响应后可以将其更改为突变，以更改状态。