VUE 数据仓库 Vuex

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

单向数据流”理念的极简示意:

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

 

为什么要使用Vuex

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

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

对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。

　　Vuex就是就是一个全部组件都可以访问的数据源,每个组件都可以通过this.$store来访问store对象

使用vuex

// 下载vuex
// 在项目目录下
npm install vue-router

// 这里,导入模块使用创建实例,在哪里创建都可以
// ,主要是要把vuex对象挂载到Vue对象中
import Vuex from 'vuex'
Vue.use(Vuex)

// 创建store对象
const store = new Vuex.store( // 传入一个对象
    {
        state:{} ,// 数据属性,
        mutations: {}, // 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
        actions:{} 
        // actions类似于mutations,不过Action 提交的是 mutation，而不是直接变更状态,而且可以包含任意异步操作。
     }
)   
     
//  将store对象挂载到vue对象中
new Vue({
  el: '#app',
  store, // 简写方式
  components: { App },
  template: '<App/>' // 这条的意思是在el指定的标签下放入<App/>组件
}) 

state属性

通过在根事例中注册store选项，该store实例会注入到根组件下的所有子组件中，子组件能够通过this.$store访问到。

子组件中可以通过计算属性实时监测Vuex 的状态

computed:{
	currentMarked(){
	　　return this.$store.xx
	               }
         }

mutations属性

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation

每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)

这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数

mutations: {
  	type:function(state){
  		
  	}	
  }
// ES6中的方法定义
mutations: {
  	type(state){
  		
  	}	
  }

要唤醒一个 mutation handler，你需要以相应的 type 调用 store.commit 方法

store.commit('type')

在组件中提交mutation:this.$store.commit('xxx')

在 Vuex 中，mutation 都是同步事务：

store.commit('increment')
// 任何由 "increment" 导致的状态变更都应该在此刻完成

Actions属性

actions: {
    increment (context) {
      context.commit('type')
    }
  }

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。

分发 Action

store.dispatch('increment')
// 在组件中分发
this.$store.dispatch('xxx') 

mutation 必须同步执行,Action 就不受约束！我们可以在 action 内部执行异步操作,所以ajax请求一般是在action中发送的

Vuex管理