Vue.js 构建一个 Vue + Vuex 项目

Vuex管理应用程序中的所有数据.它是前端数据的"单一真相来源".因此，任何更改应用程序状态的操作，例如添加好友或拒绝好友，都需要通过Vuex.这是通过三种主要的函数类型实现的，即getter、action和Mutations .

退房:https://github.com/vuejs/vuex/tree/master/examples/shopping-cart/vuex

getter用于从Vuex中的存储中获取数据.它们会对更改做出react ，这意味着如果Vuex数据发生更改，组件中的信息也会更新.你可以把它们放在获得者.js个左右，这样你就可以把它们导入任何你需要的模块中.

操作是你直接调用的函数，即当用户点击按钮时调用acceptFriendRequest.它们与数据库交互，然后发送变异.在这个应用程序中，所有动作都在actions.js中.

所以你可以在组件中调用this.acceptFriendRequest(recipient).这将告诉你的数据库更新朋友状态，然后你会得到一个确认，这发生了.此时，你会发送一个变种，更新Vuex中当前用户的好友列表.

变异会更新Vuex中的数据以反映新状态.发生这种情况时，在getter中检索的任何数据也会更新.以下是整个流程的一个示例:

import {addFriend} from './actions.js';
import {friends} from './获得者.js';
new Vue({
  vuex:{
    getters:{
      friends
    }
  },
  methods:{
    addFriend
  }
}

百货store js:

export default {
  state:{
    friends: []
  },
  mutations:{
    ADD_FRIEND(state, friend) {
      state.friends.push(friend);
    }
  }
}

行动.js:

export default {
  addFriend(friend){
    Vue.http.post('/users/1/friends',friend)
      .then((response)=>{
        dispatch("ADD_FRIEND", response) //response is the new friend
      })
  }
}

获得者.js

export default {
  friends(state) {
    return state.friends;
  }
}

所以所有这些都被组织到它们自己的文件中，你可以将它们导入到你需要的任何组件中.你可以从任何组件调用this.addFriend(friend)，然后当变异发生时，从this.friends访问的getter将自动与新朋友一起更新.你可以在应用程序的任何视图中始终使用相同的数据，并知道它是数据库中的最新数据.

一些杂项material :

• getters会自动接收state作为变量，因此您可以始终引用Vuex存储的状态
• Mutations 永远不应该是异步的.在操作中进行获取/更新，然后发送Mutations 以更新数据
• 使用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合作，实现"时间旅行".你可以看到已经发生的每一个Mutations 的列表，并将其倒带/重做.它非常适合调试和查看数据的更改位置.