Vuex 管理应用程序中的所有数据。它是前端数据的“单一事实来源”。因此，任何改变应用程序状态的事情，例如添加朋友或拒绝朋友，都需要通过 Vuex。这通过三种主要的函数类型来实现：getter、action 和 mutation。
查看：https://github.com/vuejs/vuex/tree/master/examples/shopping-cart/vuex
Getter 用于从 Vuex 的存储中获取数据。它们对变化有反应，这意味着如果 Vuex 数据发生变化，组件中的信息也会更新。你可以把它们放在getters.js 这样的地方，这样你就可以在你需要它们的任何模块中导入它们。
动作是您直接调用的函数，即。 acceptFriendRequest 当用户单击按钮时。它们与您的数据库交互，然后发送突变。在这个应用程序中，所有操作都在actions.js 中。
所以你会在你的组件中调用this.acceptFriendRequest(recipient)。这将告诉您的数据库更新朋友状态，然后您会收到确认信息已发生。那是当你发送一个突变来更新当前用户在 Vuex 中的朋友列表时。
突变会更新 Vuex 中的数据以反映新状态。发生这种情况时，您在 getter 中检索的任何数据也会更新。以下是整个流程的示例：
import {addFriend} from './actions.js';
import {friends} from './getters.js';
new Vue({
vuex:{
getters:{
friends
}
},
methods:{
addFriend
}
}
store.js：
export default {
state:{
friends: []
},
mutations:{
ADD_FRIEND(state, friend) {
state.friends.push(friend);
}
}
}
actions.js：
export default {
addFriend(friend){
Vue.http.post('/users/1/friends',friend)
.then((response)=>{
dispatch("ADD_FRIEND", response) //response is the new friend
})
}
}
getters.js
export default {
friends(state) {
return state.friends;
}
}
因此，所有这些都被组织到自己的文件中，您可以将它们导入到您需要的任何组件中。您可以从任何组件调用this.addFriend(friend)，然后从this.friends 访问的getter 将在发生突变时自动更新为新朋友。您始终可以在应用的任何视图中使用相同的数据，并且知道这些数据是您的数据库中的最新数据。
一些杂七杂八的东西：
- getter 会自动接收
state 作为变量，因此您始终可以引用 Vuex 存储的状态
- 突变不应该是异步的。在操作中获取/更新，然后派发突变只是为了更新您的数据
- 使用
Vue Resource 创建服务（或资源）将使获取/更新/删除资源更加容易。您可以将它们放在单独的文件中并将它们导入您的actions.js 以保持数据库检索逻辑分离。然后你会写FriendService.get({id: 1})而不是Vue.http.get('/users/1')。见https://github.com/vuejs/vue-resource/blob/master/docs/resource.md
- Vuex 与 vue devtools 一起用于“时间旅行”。您可以查看已发生的每个突变的列表并倒带/重做它们。它非常适合调试和查看数据更改的位置。