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>这里的状态包含初始化为null的lastClickTime属性。设置默认值对于使属性保持反应性很重要。状态中未提及的属性将可用，但此后所做的更改将无法使用getter进行访问。
使用的getter提供了一个计算的属性，每次突变更新state属性的值时都会更新该属性。
仅允许突变更改状态及其属性，也就是说，它只能同步进行。
可以在异步更新的情况下使用Action，在异步更新中，可以在该操作中进行API调用（在此由随机定时的setTimeout模拟），并且在获得响应后可以将其更改为突变，以更改状态。