vue状态管理模式之vuex-CFANZ编程社区

Vuex 是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

状态管理应用包含什么？

new Vue({
  // state  驱动应用的数据源
  data () {
    return {
      count: 0
    }
  },
  // view  以声明方式将state映射到视图
  template: `
    <div>{{ count }}</div>
  `,
  // actions  响应再view上的用户输入导致的状态变化
  methods: {
    increment () {
      this.count++
    }
  }
})

为什么要用vuex？

当多个组件共享状态时，单向数据流的简洁性很容易被破坏。vuex的思想就是把组件的共享状态抽离出来，以全局单例模式进行管理。

构建中大型单页面应用时，需要更多的在组件外部管理状态，vuex自然而然地就是最好的选择。

安装vuex

// 直接引用
<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>
// NPM
npm install vuex --save

// Yarn
yarn add vuex

在一个模块化的打包系统中，您必须显式地通过 Vue.use() 来安装 Vuex：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

当使用全局 script 标签引用 Vuex 时，不需要以上安装过程。

使用vuex

每个vuex的核心就是store（仓库）。store基本就是一个容器，它包含了应用的大部分状态。

vuex和全局对象有以下两个不同点：

vuex的状态储存是响应式的。当vuex从store中读取状态时，若store的状态发生变化时，组件的状态也会相应的得到高效更新。
不能直接改变store状态。改变store状态的唯一途径就是显示的提交（commit）mutation。这样使得我们可以方便地获取每个状态的变化。

最简单的store

import Vue from 'vue'
import Vuex from 'vuex'

const store = new Vuex.Store({  // 创建store对象
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

接下来就可以通过store.state来获取状态对象，以及通过store.commit方法触发状态变更。

store.commit('increment')

console.log(store.state.count) // -> 1

从根组件向所有子组件注入store机制：

new Vue({
  el: '#app',
  store: store,
})

ES6：

new Vue({
  el: '#app',
  store
})

提交一个变更：

methods: {
  increment() {
    this.$store.commit('increment')
    console.log(this.$store.state.count)
  }
}

结束！