这个状态自治理应用包罗以下几个部门：

state，驱动应用的数据源；
 view，以声明方式将 state 映射到视图； 
actions，响应在 view 上的用户输入导致的状态转变。(好比请求数据或者修改数据会导致数据源状态改变)  

然则遇到多个组件共享状态时，单向数据流的简洁性很容易被损坏，而且稀奇不方便。

若是坚持使用，传参的方式对于多层嵌套的组件将会异常繁琐，林林总总的问题通常会导致无法维护的代码。

以是我们把组件的共享状态抽取出来，以一个全局单例模式治理(惰性单例的设计模式)
每一个 Vuex 应用的焦点就是 store（堆栈）。“store”基本上就是一个容器，它包罗着你的应用中大部门的状态 (state)。Vuex 和单纯的全局工具有以下两点差别：

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时刻，若 store 中的状态发生转变，那么响应的组件也会响应地获得高效更新。

你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的转变，从而让我们能够实现一些工具辅助我们更好地领会我们的应用。

对，Vuex焦点就是它的store，其中，有三个主要的部门，

State：通过它存取多个组件共享的数据
Mutations：通过这个工具中的方式，可以改变State中的数据，但在这之前，必须通过显式地提交(commit) 来触发其中的方式。
Actions：提交mutation，可以包罗随便异步操作这一步不是需要的，条件是你不需要异步操作，例如ajax请求数据，

Vuex的使用和明白

以下内容基于vue-cli写的，请先完成这一步

通常Vuex会单独写在一个js文件中，

store.js

// 引入vue 和 vuex 模块
import Vue from 'vue'
import Vuex from 'vuex'
// 中间件，使用VueX作为Vue的一个参数
Vue.use(Vuex)

数据，类似组件中的data

const state = {
  // count: 0
}

盘算属性，类似组件中的computed

const getters = {
  // evenOrOdd: state => state.count % 2 === 0 ? 'even' : 'odd'
}

用户派发的行为，类似methods

const actions = {
  // increment: ({commit}) => commit('increment')
}

必须通过这一步来修改数据

const mutations = {
  // increment: ({count}) => {
  //   state.count++
  // }
}

导出这个工具

export default new Vuex.Store({
  state,
  getters,
  actions,
  mutations
})

然后在main.js的Vue实例中，注册一个store(堆栈)

import store from './store'
new Vue({
  ...
  store,
  ...
})

接下来从组件(视图)最先，明白一下这个历程

Vue-component:

用户的特定行为(需要使用Vuex的情形) 会派发一个义务给Actions 或者直接给Mutations

写在App.vue组件中
HTMT

<div @click="add">
  {{ count }}
</div>

JS

methods: {
  add () {
    // 派发一个义务，叫做'increment'
    this.$store.dispatch('increment')
  }
}

Actions:

Actions是用户指定的行为，这里没有异步操作，以是直接commit到Mutations

const actions = {
  // const { commit } = store
  // commit === store.commit
  increment: ({commit}) => commit('increment')
  // es6的写法，它等同于这样：
  // increment ({commit}) {
  //   commit('increment')
  // }
}

Mutations:

Mutations如上所述，修改一下state的数据

const mutations = {
  increment: ({count}) => {
    state.count++
  }
}

state:

state的数据被改变

Vue-component:

最后回到了组件这里，通过盘算属性获取到改变的数据并显示到页面上

count () {
  return this.$store.state.count
}

getters

另外，我们希望实现这么一个小的效果：count为偶数时为绿色，奇数时为红色，那么我们在store中通过getters实现(当然在组件中通过盘算属性也可以实现，这里只是为了说明getters的作用)

const getters = {
  // evenOrOdd: state => state.count % 2 === 0 ? 'even' : 'odd'
}

在App.vue中的computed中写上

evenOrOdd (state) {
  return this.$store.getters.evenOrOdd
}

在模板中弥补一点：

:class="evenOrOdd"

和对应的css：

.even {
  color: green;
}
.odd {
  color: red;
}

转载泉源：https://segmentfault.com/a/1190000012070824

链接: http://www.fly63.com/article/detial/127