快速掌握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!