vue.js

vue.js是一套易用，灵活，高效的渐进式javascript框架，只需要引入vue.js即可使用vue提供的虚拟dom与双向数据绑定等基础用法

与react.js相同，属于轻量级视图层框架，即等于仅着重于MV*中的V

vue.js文档

vuex

vue中主要以高度组件化为主，父子组件间，非父子组件间的数据交互实际上可以使用props或vuebus来及解决，但若是想要构建中大型应用的话，必定会极为繁琐，所以vue推出了单例状态管理的vuex来解决这类问题

起步于flux，redux，用于管理vue组件间的数据状态，实际上与前两者的核心是相同的，都是通过构建一个无状态的store对象用于保存数据结构（虽然是仅保存数据结构，但是需要注意的是，store必须保存应用中所有的状态，这样才能真正实现单一状态源管理模式）

而当保存应用数据的store需要修改状态时，则使用mutations来修改store中的状态，vuex提供了两种方式用于修改store的状态，一种是通过同步的方式mutations，另一种则是采用异步的方式action，两种方式看似应用的场景不同，实际上两者是相当于redux中的reducer与action

在实际数据操作中，只要是涉及异步操作（如获取后台数据等）则调用相应的action，而在action中调用（commit）相应的mutations即可

至于mutations一方面提供方法给action中调用，另一方面，当应用并不需要使用异步操作时，则可以直接调用mutations修改store

vuex文档

为什么要使用vuex

一方面高度组件化的vue在复杂应用中，组件间的数据传递十分繁琐，大量的props与vuebus会影响可扩展性与可阅读性，所以提供一种将应用中所有数据保存起来并且统一操作的状态管理方式是解决此类问题的好方法之一

需要注意的是，vuex是针对于组件间有着大量数据交互，牵扯的应用中才能更为简便，对于简单应用，甚至是普通的html文件而言则是毫无意义甚至是造成额外负荷

使用vuex有一个极大的好处便是它的函数式编程，采用函数式编程使得整个应用处于一种高度可预测的状态中，不仅可以高度调配自身状态，并且可以高度掌握到应用状态的变化

在每一次的应用状态（store）发生改变时，都能可通过调用的mutations进行回溯，保证应用稳定性，安全性，即redux中的时间旅行

开始搭建

现在开始搭建一个基于vue+vuex的简单记事本单页应用，该应用采用node.js+mongodb作为后台

应用基本结构

该应用使用vue提供的官方脚手架vue-cli，当然不使用该脚手架也问题不大

github地址

官方提供的脚手架实际上已经包含了开发阶段所需要的大部分模块，只需要稍微添加些许自己的代码即可完成该应用

后台与数据库的搭建不一定要使用node.js+mongodb，因为vue本身仅包含view层，所以采用php或是java等并不会影响应用功能

创建store（仓库）

store仅包含应用的数据结构，在该应用中只需要有当前编辑文本与文本列表即可

const state = {
  textlist: [],
  nowtext: {
    text: '',
    id: 0
  }
}

mutations

mutations提供的是用于修改store中的状态而已，更为简单

getText (state, textlist) {
    state.textlist = textlist
  },
nowText (state, text) {
    state.nowtext = text
    console.log(state)
  }

actions

actions主要提供异步操作的可能，这里是一个采用vue-resource的方式请求后台接口并返回调用（commit）相应的mutations来修改状态即可

getTestListAtion ({commit}) {
    Vue.http.post('/v1/vuex/gettextlist').then(function (Response) {
      return Response.json()
    }).then(function (Response) {
      console.log(Response)
      commit('getText', Response.data.list)
    })
  },

vue组件搭建

这里主要构建了两个组件，笔记列表与编辑笔记，编辑笔记与新建笔记实际上是相同页面，通过判断相应的条件来区分即可，这里使用的是笔记id来判断

我们需要引入相应的store，mutations和actions到组件中，vuex为我们提供了一些映射的方法，十分高效简洁

mapMutations：批量映射mutations
mapActions：批量映射actions
mapState：批量映射state

通过这三个方法，可以将之前创建的vuex所提供的状态放入到对应的组件中，实现状态管理

vue路由控制

官方文档十分简洁扼要，大部分所需要的方法都封装的很好，直接查阅即可

总结

创建store保存数据，mutations修改状态，actions异步操作，vuex状态管理的基本便完成，此后将vuex引入到相应的组件中，即可享受来自vuex的高度管理与高度可预测的良好方式

所有文档