Vuex 快速入门(保姆级教程)

首先回顾组件通信:

1.父传子:props; 子传父:$emit()

2.非父子:eventBus:$on+$emit

3.非父子:Vuex

1.Vuex是什么?

Vuex是专门为Vue.js应用程序开发的状态管理模式,采用集中式管理应用到各个组件,从而解决多组之间的数据通信.

要点:

1.vue官方搭配.类似vue-route,有专门的调试工具

2.集中式数据管理使操作更简洁

3.数据变化是响应式的,

4.独立于组件体系之外的,管理公共数据的工具

2.Vuex的学习内容(5个概念)

1.state:存储公共数据(类似组件中的data)  (核心)

2.mutations:改变数据的方法集合(类似methods) (核心) 

3.getters:类似computed(利用现有的状态进行计算得到新的数据 -----派生)

4.actions:异步操作

5.modules:模块化拆分

3.怎么使用vuex

1.老项目中.额外安装vuex包;再配置

1.在store/index.js 中放置具体的代码
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  }
})
export default store


-------------------------------------------

2.在src/main.js中

// 1. 导入store
import store from './store' 

new Vue({
   store    //注入store 
  // 省略..
})

2.新项目中.在配置vue-cli中创建项目时可以手动选中vuex

4.组件与模板中使用

1.state  

1.模板中 省略this
{{$store.state.xxx}}
{{$store.state.模块名.xxx}}

2.组件中
this.$store.state.xxx
this.$store.state.模块名.xxx

2.mutations 

1.注册格式 
mutations：{
    // 每一项都是一个函数，可以声明两个形参
    参数1:必选  就是当前state   
  	mutation名1：function(state [, 载荷]) {
  
    },
}

2.调用格式
// commit是固定写法    
// 参数2:(可选) 如果要传递复杂数据,第二个参数可以是对象
this.$store.commit('mutation名', 实参，给第二个参数)
this.$store.commit('模块名/mutation名', 实参，给第二个参数)

Vuex-mutations拓展:

(1).Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。

(2).不推荐直接在组件内部修改数据,特别是在严格模式下会报错。

---------------------------------------------

3.getters

1.定义格式
new Vuex.store({
  // 省略其他...
  getters: {
    // state 就是上边定义的公共数据state
    getter的名字1: function(state) {
      return 要返回的值
    }
  }
})


2.使用格式
$store.getters.xxx
$store.getters['模块名/xxx']

4.actions

1.action中可以通过调用 mutation来修改state，而不是直接变更状态

2.action 可以包含任意异步(例如ajax请求)操作。

1.定义
new Vuex.store({
  // 省略其他...
  actions: {
    // context对象会自动传入，它与store实例具有相同的方法和属性
    action的名字: function(context, 载荷) {
      // 1. 发异步请求, 请求数据
      
      // 2. commit调用mutation来修改/保存数据
      
      // context.commit('mutation名', 载荷)
    }
  }
})

2.使用
this.$store.dispatch('actions的名字', 参数)

this.$store.dispatch('模块名/actions的名字', 参数)

5.modules

export default new Vuex.Store({
  // state: 用来保存所有的公共数据
  state: {},
  getters: {},
  mutations: {},
  actions: {},
  modules: {
  	模块名1： {
    		// namespaced为true，则在使用mutations时，就必须要加上模块名
            // 如果为false 则不需加模块名
      	namespaced: true, 
  		  state: {},
  			getters: {},
  			mutations: {},
  			actions: {},
  			modules: {}
  	}，

用了modules之后的结构

5.mapState辅助函数

作用:当数据嵌套太深,优化访问方式

1.mapState与mapGetters

1.导入  他们都是vuex中定义的工具函数

import {mapState} from 'vuex'
import {mapGetters} from 'vuex'


2.使用

//模板中用法相同
<h1>{{xxx}}</h1>

computed: {

     ...mapState('模块名',['xxx'])
     ...mapGetters('模块名',['xxx'])
     
  },

2.mapMutations与mapActions

1.导入
import {mapActions} from 'vuex'
import {mapMutations} from 'vuex'


2.使用  

//模板中
<button @click="xxx"></button>



//注意是写在methods 里面
methods: {

    ...mapMutations('模块名',['xxx']),
    ...mapActions('模块名',['xxx'])
  },

 小结:

1:actions   mutations   state  关系图

 2:核心API