腳本之家服務器常用軟件

快捷導航

Vuex的使用及知識點筆記

更新時間：2022年12月07日 09:24:41 作者：鍵.

這篇文章主要介紹了Vuex的使用及知識點筆記，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

1 入門

vuex是為vue.js專門提供的狀態(tài)管理模式

簡單解釋：將所有組件公用的數(shù)據(jù)、方法提取到指定的地方，進行統(tǒng)一管理

2 安裝

下載vuex

npm i vuex --save

在src根目錄中新建一個store文件夾并新建一個index.js文件，并在index.js中引入vue和vuex

import Vue from 'vue'
//導入vuex插件
import Vuex from 'vuex'

//使用vuex插件
Vue.use(Vuex)

export default new Vuex.Store({
	state:{//state相當于普通組件中的data數(shù)據(jù)域
		
	},
	getters:{//getter相當于computed對象
		
	},
	mutations:{//mutations相當于methods對象
		
	},
	actions:{
		
	},
	modules:{//分割模塊
		
	}
})

在main.js中導入index.js文件并掛載

3 核心概念的使用

3.1 state

state為vuex中的公共狀態(tài)，我們可以看成state為所有組件的data,用于保存所有組件的公共數(shù)據(jù)·。

export default new Vuex.Store({
	state:{//state相當于普通組件中的data數(shù)據(jù)域
		names:['胡桃','甘雨']
	}
})

在任意組件內可以使用this.$store.state.names來獲取到state里面的數(shù)據(jù)

 <p>{{this.$store.state.names}}</p>

3.2 getters

vuex的getters屬性可以理解為所有組件的computed屬性，也就是計算屬性.getters的返回值會根據(jù)其依賴緩存起來的，只有當依賴的值發(fā)生改變，getters才會重新計算

export default new Vuex.Store({
	state:{//state相當于普通組件中的data數(shù)據(jù)域
		names:['胡桃','甘雨'],
		num:5
	},
	getters:{//getter相當于computed對象
		add(state){//state的數(shù)據(jù)會自動傳入add的方法
			return state.num+5
		}
	}
})

在任意的組件內使用this.$store.getters.add調用計算的方法

<p>{{this.$store.state.names}}</p>
<p>{{this.$store.getters.add}}</p>

3.3 mutations

vuex中的mutations可以理解為所有組件的methods方法。

mutations對象中保存了更改數(shù)據(jù)的回調函數(shù)。

第一個參數(shù)為state,第二個參數(shù)為payload,相當于自定義參數(shù)

export default new Vuex.Store({
	state:{//state相當于普通組件中的data數(shù)據(jù)域
		names:['胡桃','甘雨'],
		num:5
	},
	getters:{//getter相當于computed對象
		add(state){
			return state.num+5
		}
	},
	mutations:{//mutations相當于methods對象
		add(state,payload){//注意：必須傳入state參數(shù)，payload為自定義參數(shù)
			state.num+=payload;
		}
	}
})

在任意組件內通過this.$store.commit()觸發(fā)mutations內的方法

<template>
	<div id='Home'>
        <p>{{this.$store.state.names}}</p>
        <p>{{this.$store.getters.add}}</p>
        <p><input type="text"  v-model="this.$store.state.num"/> <span @click="add()">+</span></p>
    </div>
</template>

<script>
export default{
	name:'Home',
	methods:{
		add(){
            // this.$store.commit('evnetName',自定義的參數(shù))
			this.$store.commit('add',5)
		}
	}
}
</script>

每一次點擊都會給state里面的num數(shù)據(jù)加5

3.4 actions

actions和mutations類似，不同點在于：

1、actions提交的是mutations,而不是直接變更狀態(tài)

2、actions中包含異步，mutations中絕對不允許出現(xiàn)異步

3、actions中回調函數(shù)的第一個參數(shù)為context,得到一個與store具有相同屬性和方法的對象

export default new Vuex.Store({
	state:{//state相當于普通組件中的data數(shù)據(jù)域
		names:['胡桃','甘雨'],
		num:5
	},
	getters:{//getter相當于computed對象
		add(state){
			return state.num+5
		}
	},
	mutations:{//mutations相當于methods對象
		add(state,payload){//注意：必須傳入state參數(shù)，payload為自定義參數(shù)
			state.num+=payload;
		}
	},
	actions:{
		addSync(context,payload){
			setTimeout(()=>{
                //add為mutations內定義的函數(shù)
                //通過commit調用mutations內的函數(shù)
				context.commit('add',payload)
			},1000)
		}
	},
})

組件內綁定事件

<p><input type="text"  v-model="this.$store.state.num"/> <span @click="addSync()">+</span></p>

通過 this.$store.dispatch調用actions內的異步方法

methods:{
		addSync(){
			this.$store.dispatch('addSync',2)
		}
	}

測試的效果就是每次點擊之后，要過1s才會改變state里面的數(shù)值num

3.5 modules

由于使用單一狀態(tài)樹，應用的所有狀態(tài)會集中到一個比較大的對象。

當應用變得非常復雜時，store 對象就有可能變得相當臃腫。

為了解決以上問題，Vuex 允許我們將 store 分割成模塊（module）。

每個模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進行同樣方式的分割

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

在組件內分模塊進行訪問

<h2>{{this.$store.state.a.count}}</h2>
<h2>{{this.$store.state.b.msg}}</h2>

4 輔助函數(shù)的使用

mapState、mapGetters、mapMutations、mapActions

引入

import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'

在computed中使用擴展運算符進行定義

export default {
  name: 'list',
  data () {
    return {
    }
  },
  computed:{
    	  ...mapState({
		  //Index則代表state的num屬性
		index:'num'
	  }),
	  ...mapGetters({
		  // 屬性值add則代表getters內的add方法
		  add:'add'
	  }) 
  },
  methods:{
     ...mapMutation({
		  addNum:'addNum'
	  }),
	  ...mapActions({
		  
	  }) 
  }
}