快速掌握vuex

vuex是一个专门为vue.js设计的集中式状态管理架构。什么是状态？可以把它理解为data中的属性需要共享给其他vue组件使用的部分，就叫做状态。简单的说就是data中需要共用的属性。

vuex共有5个核心概念：state 、getters 、mutations 、actions 、modules

先看一下vue-cli工程目录

前提准备：

①安装vue-cli + webpack 工程(不会的小伙伴可以查看我之前的博客，里面有详细介绍)，然后安装vuex

②安装vuex指令：npm install vuex --save

③按照目录图创建文件

④在store.js引入vuex，代码如下：

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

⑤注入store，在实例化 Vue对象时加入 store 对象 

 

示例和解释:

1.state的使用

为什么要使用state？可以这么理解，我们用vue里面的data来绑定数据，但是如果有多个组件呢，如何做到共享数据呢，就必须用上state了。

Test.vue代码

<template>
  <div class="test">
    	<p>{{ $store.state.num }}</p>
    	<button @click="showText">点击这里</button>
  </div>
</template>
<script>
import store from '../vuex/store.js';
export default {
  name: 'text',
  store,
  methods:{
  	showText(){
  		console.log( this.$store.state.num )
  	}
  }
}
</script>

store.js代码

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = {
	num:1
}
export default new Vuex.Store({
	state,
})

使用方法：

$store.state.num(在模板中可以不写this，写在其他地方要在前面加上“this.”)

 

2.getters的使用

 getters 和 vue 中的 computed 类似 , 都是用来计算state 然后生成新的数据 ( 状态 ) 的。

为什么 要使用getters？比如一个属性color，它有很多个值，比如green、blue、red等等，这时候我们就可以使用getters了，我们可以在getters里面一一声明。

Text.vue代码

<template>
  <div class="test">
    	<p>{{ $store.state.num }}</p>
    	<button @click="showText()">点击这里</button>
  </div>
</template>
<script>
import store from '../vuex/store.js';
export default {
  name: 'text',
  store,
  methods:{
  	showText(){
  		console.log( this.$store.state.isNow )
  		console.log( this.$store.getters.notIsNow )
  	}
  },
}
</script>

store.js代码

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = {
	num:1,
	isNow:true
}
const getters = {
	notIsNow:function(state){
		return !state.isNow
	}
}
export default new Vuex.Store({
	state,getters
})

使用方法：

$store.getters.notIsNow

 

3.mutations的使用

为什么 要使用mutations？使用mutations是为了操作state里面的状态。

Test.vue代码

<template>
  <div class="test">
    	<p>{{ $store.state.num }}</p>
    	<button @click="$store.commit('add')">点击这里</button>
  </div>
</template>
<script>
import store from '../vuex/store.js';
export default {
  name: 'text',
  store,
}
</script>

store.js代码

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = {
	num:1,
	isNow:true
}
const mutations={
    add(state){
        state.num++;
    },
    reduce(state){
        state.num--;
    }
}
export default new Vuex.Store({
	state,mutations
})

使用方法：

$store.commit('add')

 

4.actions的使用

为什么 要使用actions？请看下面的"注意"里面的内容。

Test.vue代码

<template>
  <div class="test">
    	<p>{{ $store.state.num }}</p>
    	<button @click="$store.commit('add')">使用mutations点击</button>
    	<button @click="$store.dispatch('addAction')">使用actions点击</button>
  </div>
</template>
<script>
import store from '../vuex/store.js';
export default {
  name: 'text',
  store,
}
</script>

store.js代码

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = {
	num:1,
	isNow:true
}
const mutations={
    add(state){
        state.num++;
    },
    reduce(state){
        state.num--;
    }
}
const actions = {
	addAction(context){
        context.commit('add')
    },
    reduceAction({commit}){
        commit('reduce')
    }
}
export default new Vuex.Store({
	state,mutations,actions
})

使用方法：

$store.dispatch('addAction')

注意：

action提交的是mutations，可以是异步操作；mutations是修改数据的，必须同步。

也就是说，如果调用的是actions，然后actions触发mutations， 通过mutations修改数据。

 

5.mapState、mapGetters、mapMutations、mapActions的使用

为什么要使用它们，相信不难理解，我在上面四点也提及了这四种核心的使用方法，但是有没有觉得有点长呢？比如：$store.getters.notIsNow，看起来不舒服，所以就有了以下这些新写法，也能和以前写的一大串代码达到同样的作用。

Test.vue代码

<template>
  <div class="test">
    	<p>{{ num }}</p>
    	<p>{{ notIsNow }}</p>
    	<button @click="add">使用mutations点击</button>
    	<button @click="addAction">使用actions点击</button>
  </div>
</template>
<script>
import store from '../vuex/store.js';
import { mapState , mapGetters , mapMutations , mapActions } from 'vuex';
export default {
  name: 'text',
  store,
  computed:{
	...mapState([ 'num','isNow' ]),	
	...mapGetters(['notIsNow'])
  },
  methods:{
	...mapMutations([  
        'add','reduce'
    ]),
    ...mapActions([
    	'addAction',
    	'reduceAction'
    ]),
		changeMsg(){
		//这里是vue methods里本身正常的方法
	},
  },
}
</script>

store.js代码

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = {
	num:1,
	isNow:true
}
const getters = {
	notIsNow:function(state){
		return !state.isNow
	}
}
const mutations = {
    add(state){
        state.num++;
    },
    reduce(state){
        state.num--;
    }
}
const actions = {
	addAction(context){
        context.commit('add')
    },
    reduceAction({commit}){
        commit('reduce')
    }
}
export default new Vuex.Store({
	state,getters,mutations,actions
})

使用方法：

①引入：import { mapState , mapGetters , mapMutations , mapActions } from 'vuex';

②...mapState([ 'num','isNow' ])

    ...mapGetters(['notIsNow'])

    ...mapMutations([  'add' , 'reduce' ]),
    ...mapActions([  'addAction' , 'reduceAction' ])

 

6.modules的使用

为什么要使用modules?当我们有很多个组件时，但是可能一部分组件共用的是某些状态，另一部分组件共用的是另一些状态，这时，为了把它们区分开来，当然，也方便我们的管理，modules自然就派上用场了。

store.js代码

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
import sonOne from './store_one.js';
export default new Vuex.Store({
	modules:{
		'one':sonOne,
	}
})

store_one.js

export default{
	state : {
		num:1,
		isNow:true
	},
	getters : {
		notIsNow:function(state){
			return !state.isNow
		}
	},
	mutations : {
	    add(state){
	        state.num++;
	    },
	    reduce(state){
	        state.num--;
	    }
	},
	actions : {
		addAction(context){
	        context.commit('add')
	    },
	    reduceAction({commit}){
	        commit('reduce')
	    }
	}
}

说明一下，如果使用了modules，除了state的使用方法变动一下，其余的均不变，

state的使用变为：$store.state.one.num，这里的one是modules的名字。

mapState简便写法:

...mapState({
        num: state => state.one.num,
        isNow: state => state.one.isNow,
})

 

end!