Vuex--状态管理模式

一、Vuex是什么

    官方文档的定义：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的全部组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

二、Vuex 的做用

　　集中式管理vue多个组件共享的状态和从后台获取的数据  

 

三、Vuex核心-store库

   上图中虚线框的部分就是vuex，是公用的数据存储区域，能够理解为一个store库，这个库主要由如下三部分组成：

• State：存放全部的公共数据，当组件使用公共数据时，直接去调用State就能够了。若 状态发生变化，相应 的组件也会获得高效更新。
• Actions：存放组件须要调用的异步操做。若组件想要改变State中的数据，必须先经过Dispatch方法调用Actions（有时能够忽略调用Actions，直接调用Mutations），执行一些异步或同步操做
• Mutations：组件若要改变数据，先去调用Actions，经过Actions再根据Commit方法去调用Mutations，此时Mutations中存放的是同步的修改State的方法

 

四、Vuex 的工做原理

    首先vue组件会经过this.$store.state或者mapState()直接从State中获取数据。或者经过this.$store.getters或者mapGetters（）从getters中获取数据。getters是计算属性数据 ，能够读取State中的数据。

vue组件会经过$store.dispatch()或者mapActions触发actions。以后，actions经过commit触发mutations。而mutations会直接更新State中的数据

五、建立store库

 1 const store = new Vuex.Store({
 2   state: {
 3     count: 0
 4   },
 5   mutations: {
 6     increment (state) {
 7       state.count++
 8     }
 9   }
10 })

以后，咱们能够经过store.commit('increment')触发状态的变动；若是想要变动state数据时，必须以提交 mutation 的方式，这样才能更明确地追踪到状态的变化

使用console.log(store.state.count) // -> 1获取数据

6、vue组件中如何使用state状态呢？

  因为 store 中的状态是响应式的，在组件中调用 store 中的状态简单到仅须要在计算属性中返回便可。触发变化也仅仅是在组件的 methods 中提交 mutation。

1 // 建立一个 Counter 组件
2 const Counter = {
3   template: `<div>{{ count }}</div>`,
4  computed: {
5     count () {
6       return store.state.count//store.state.count 变化的时候, 都会从新求取计算属性，而且触发更新相关联的 DOM
7     }
8   }
9 }

可是，这种模式会致使组件依赖全局状态单例。在模块化的构建系统中，在每一个须要使用 state 的组件中须要频繁地导入，而且在测试组件时须要模拟状态。为了解决这个问题，Vuex 经过 store 选项，提供了一种机制将状态从根组件“注入”到每个子组件中（需调用 Vue.use(Vuex)）：

1 const app = new Vue({
2   el: '#app',
3   // 把 store 对象提供给 “store” 选项，这能够把 store 的实例注入全部的子组件
4  store, 5   components: { Counter },
6   template: `<div class="app"><counter></counter> </div>`
7 })

经过在根实例中注册  选项，该 store 实例会注入到根组件下的全部子组件中，且子组件能经过  访问到。
 使用state的实现：storethis.$store此时组件Counter

 1 const Counter = {
 3   template: `<div>{{ count }}</div>`,
 4   computed: {
 5     count () {
 6       return this.$store.state.count  7     }
 8   }
 9 }

 

本文章主要是对Vuex基本知识点的学习总结，详细内容请参考官网https://vuex.vuejs.org/zh/