VUE-状态管理模式

从上方的图中 可以看出store的作用就是将一些状态在各个组件中进行共享，如说登录状态。

这里我们需要用到vuex

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

1）什么是“状态管理模式”？ 

new Vue({
    // state
    data (){
        return {
            count: 0
        }    
    },
    // view
    template:`
    
{{ count }}
    `
    //actions
    methods: {
        increment(){
            this.count++
        }
    }
})

• Render渲染
• Dispatch转发
• commit提交状态变更
• mutations变更行为
• mutate变化 

 

这个状态资管理应用包含以下几个部分：

• state, 驱动应用的数据源；
• view, 以声明方式将 state 映射到视图；
• actions, 相应在view 上的用户输入导致的状态变化。

以下是一个表示“单向数据流” 理念的简单示意：

 

 2）安装vuex

npm install vuex --save

 3）入门案例

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

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment (state) {
            state.count++
        }
    }
})

但是，当我们的应用遇到多个组件共享状态时， 单向数据流的简洁性很容易被破坏：

• 多个视图依赖于同一状态。
• 来自不同视图的行为需要变更同一状态。

 对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。

对于问题二，我们经常会采用父子组件直接引用或者通过时间变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。

因此，我们为什么不把组件的共享状态抽取处理，以一个全局单利模式管理呢？在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为!

通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护。

 可以通过 store 来获取状态对象，以及通过 store.commit 方法触发状态变更：

  store.commit('increment')

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

为了在Vue组件中访问 this.$store property，你需要为 Vue 实例提供创建好的 store。Vuex 提供了一个从根组件向所有子组件，以 store 选项的方式 “注入”该 store 的机制：

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