vuex 整理汇总(简单粗暴)

1. Vuex概述

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

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

1. 能够在vuex中集中管理共享的数据，易于开发和后期维护
2. 能够高效地实现组件之间的数据共享，提高开发效率
3. 存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同步

3. Vuex的基本使用

3.1.安装vuex依赖包

npm install vuex --save

3.2.导入vuex包

import Vuex from 'vuex'
Vue.use(Vuex)

3.3.创建store对象

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

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

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

4. Vuex的核心概念

4.1 核心概念概述

Vuex中的主要核心概念如下:

• State
• Mutation
• Action
• Getter

4.2 State

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

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

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

this.$store.state.全局数据名称
//不建议修改

4.2.2 mapState 函数是访问 State 中数据的第二种方式

// 1．从vuex中按需导入mapstate 函数
import { mapState } from 'Vuex'

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

// 2．将全局数据，映射为当前组件的计算属性
//使用扩展运算符映射为当前组件的计算属性
computed: {
	...mapState ( [ 'count' ])
}

4.3 Mutation

Mutation用于变更Store中的数据。

• 只能通过mutation变更Store数据，不可以直接操作Store中的数据。
• 通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。

4.3.1 this.$store.commit() 是触发 mutations 的第一种方式

this.$store.commit() 可以在触发mutations时传递参数:

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

//触发mutation
methods: {
    handle1( ) {
        //触发mutations 的第一种方式
        this.$store.commit ( ' add ' )
    }
    handle2( ){
        //在调用commit函数,
        //触发mutations 时携带参数
	    this.$store.commit ( 'addN ', 3)
   }
}

4.3.2 mapMutations 函数 是触发 mutations 的第二种方式

this.$store.commit()是触发mutations的第一种方式，从 vuex中按需导入mapMutations函数是触发mutations的第二种方式;

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

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

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

4.4 Action

Action用于处理异步任务。
如果通过异步操作变更数据，必须通过Action，而不能使用Mutation，但是在Action中还是要通过触发Mutation的方式间接变更数据。

//1. 定义Action
const store = new Vuex.Store ({
	// ...省略其他代码
    mutations: {
        //触发Action
        add (state){
            state.count++
        },
        //触发 actions 异步任务时携带参数
        addN(state,step){
        	state.count+= step;
        }
     },
     actions: {
        addAsync(context) {
            setTimeout (()=>{
                context.commit ( 'add' )
            }, 1000)
         },
        //触发 actions 异步任务时携带参数
         addNAsync(context,step) {
            setTimeout (()=>{
                context.commit ( 'addN',step )
            }, 1000)
         },
      }
)}

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

//触发Actions 的第一种方式
methods: {
 handle(){
 	//触发 actions 的第一种方式 dispatch
    this.$store.dispatch('addAsync')
  }
  //触发 actions 异步任务时携带参数
  handle2(){
 	//触发 actions 的第一种方式 dispatch
    this.$store.dispatch('addNAsync',8)
  }
})

4.4.2 mapActions 函数触发 actions 的第二种方式

this.$store.dispatch()是触发actions的第一种方式，从vuex中按需导入 mapActions 函数是触发actions的第二种方式:

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

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

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

4.5 Getter

• Getter可以对 Store中已有的数据加工处理之后形成新的数据，类似Vue的计算属性。
• Store 中数据发生变化，Getter的数据也会跟着变化。

//定义cetter
const store = new Vuex.Store ({
state: {
	count: 0
},
//Getter可以对 Store中已有的数据加工处理之后形成新的数据，类似Vue的计算属性
getters: {
    showNum: state => {
    	return '当前最新的数量是【'+state.count +'】'
    }
)})

4.5.1 使用getters的第一种方式

this.$store.getters.名称

4.5.2 mapGetters 函数 是访问 getters 的第二种方式

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

链接: githubvuex学习示例代码下载.