Vuex简介与概述

1.Vuex 概述

1.1组件之间共享数据的方式

父向子传值： v-bind属性绑定
子向父传值：v-on时间绑定
兄弟组件之间共享数据：EventBus

• $on 接收数据的那个组件
• $emit发送数据的那个组件

1.2Vuex是什么

Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享

1.2使用Vuex统一管理状态的好处

①能在Vuex中集中管理共享的数据，易于开发和后期维护

②能够高效地实现组件之间的数据共享，提高开发效率

③存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同步

1.3什么样的数据适合存储到Vuex中

一般情况情况下，只有组件之间共享的数据，才有必要存储到Vuex中；对于组件中的私有数据，依旧存储在组件自身的data中既可。

2、Vuex的基本使用

1.安装vuex依赖包

npm install vuex --save

2.导入vuex包

import Vuex from 'vuex'

Vue.use(Vuex)

3.创建store对象

const store = new Vuex.store({
	// state 中存放的就是全局共享数据
	state: {count: 0}
})

4.将store对象挂载到vue实例中

new Vue({
	el: 'app',
	render: h => h(app),]
	router,
	// 将创建的共享数据对象，挂载到Vue实例中
	// 所有的组件，就可以直接从store中获取全局数据了
	store
})

3、Vuex的核心概念

3.1.核心概念概述

Vuex中的主要核心概念如下

• State
• Mutation
• Action
• Getter

3.2.State

State提供唯一的公共数据源，所有共享的数据都要统一放到Store的state中进行存储。

// 创建store 数据源，提供唯一公共数据
const store = new Vuex.Store({
	state: { count: 0 }
})

组件访问State中数据的第一种方式：

this.$store.state.全局数据名称
// 在模板字符串访问数据的时候可以不写this

组件访问State中数据的第二中方式：

// 1. 从vuex中按需导入 mapState 函数
import { mapState  } from "vuex"

通过刚才导入的mapState函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性：

// 2. 将全局数据，映射为当前组件的计算属性
computed: {
     ...mapState(['count'])
    // 可以认为count是计算属性的值
}

3.3 Mutation

Mutation用于变更Store中的数据
①只能通过mutation变更Store数据，不可以直接操作Store中的数据。
②通过这种方式虽然操作起来比较繁琐一些，但是可以集中监测所有数据的变化。

// 定义Mutation
const store = Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    add(state) {
      // 变更状态
      state.count++
    }
  }
})

// 触发mutation
methods: {
    btnhandler1() {
      // 触发mutation的第一种方式
      this.$store.commit('add')
    }
  }

可以在触发mutation时传递参数：

// 定义Mutation
const store = Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    addN(state, step) {
      // 变更状态
      state.count += step
    }
  }
})

// 触发mutation
methods: {
  btnhandlern() {
    // 在調用commit函數，
    // 触发mutation 时携带函数
    this.$store.commit('addN', 3)
  }
}

this.$store.commit()是出发mutations的第一种方式，出发mutations的第二种方式如下：

// 1. 从vuex中按需导入 mapMutations函数
import { mapMutations } from 'vuex'

通过刚才导入的mapMutations函数，将需要的mutations函数，映射为当前组件的methods方法：

// 2. 将指定的mutations函数，映射为当前组件的methods函数
methods: {
   ...mapMutations(['add', 'addN'])
}

3.4 Action

Action用于处理异步任务

如果通过异步的操作变更数据，必须通过Action，而不能使用Mutation（使用Mutation时，vue调试器会无法更新state的状态），但是在Action中还是要通过触发Mutation的方式间接变更数据

// 定义Action 
const store = new Vuex.Store({
  //……省略其他代码
  mutations:{
  	add(state) {
  	  state.count++
  	}
  },
  actions: {
  	addAsync(context) {
  	  setTimeout(()=>{
  	    context.commit('add')
  	  }, 1000)
  	}
  }
})

// 触发action
methods：{
  handle() {
  	// 触发actions的第一种方式
  	this.$store.dispatch('addAsync')
  }
}

触发actions异步任务的时候如何携带参数:

// 定义 Action
const store = new Vuex.Store({
  // ……省略其他代码
  mutations:{
    addN(state, step){
      state.count += step
    }
  },
  actions: {
    addNAsync(context, step){
      setTimeout(() =>{
        context.commit('addN', step)
      },1000)
    }
  }
})

// 触发action
methods: {
  handle() {
    // 在调用dispatch函数，
    // 触发actions时携带参数
    this.$store.dispatch('addNAsync', 5)
  }
}

this.$store.dispatch()是触发actions的第一种方式，触发actions的第二种方式：

// 1. 从 vuex 中按需导入 mapActions 函数
import { mapActions } from 'vuex'

通过刚才导入的mapActions函数，将需要的actions函数，映射为当前组件的methods方法：

// 2. 将指定的actions函数，映射为当前组件的methods函数
methods：{
  ..mapActions(['subAsync', 'subNAsync']),
}

这里的subAsync和subNAsync可以直接调用，也可以配合其他函数使用

3.5 Getter

Getter用于对Store中的数据进行加工处理形成新的数据。

①Getter可以对Store中已有的数据加工处理之后形成新的数据，类似Vue的计算属性。

②Store中数据发生拜年话，Getter的数据也会跟着变化。

// 定义Getter
const store = new Vuex.Store({
  state: {
  	count: 0
  },
  getters: {
    showNum: state => {
      return '当前最新的数量是【' + state.count + '】' 
    }
  }
})

使用getter的第一种方式：

this.$store.getters.名称

使用getter的第二种方式：

import { mapGetter } from 'vuex'
computed: {
  ...mapGetter(['showNum'])
}

showNum即为一个计算属性，可以直接使用。