Vuex中五個屬性以及使用方法詳解
Vuex介紹
vuex是專門為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲,管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。
state 數(shù)據(jù)存貯
getter state的計算屬性
mutation 更改state中狀態(tài)的邏輯 同步操作
action 提交mutation 異步操作
model 模塊化
state基本數(shù)據(jù),存儲變量
使用方法:
可以通過this.$store.state 獲得Vuex的state,如下:
// src/store/index const store = new Vuex.Store({ state: { number:66 } }) const app = new Vue({ //.. store, computed: { count: function(){ return this.$store.state.number } }, // this.$store.state.number }) // 每當 store.state.number 發(fā)生變化, 都會重新求取計算屬性,并且觸發(fā)更新相關(guān)聯(lián)的 DOM。
mapState輔助函數(shù)
// 在需要使用的文件里 import { mapState } from 'vuex' export default { // ... methods:{ ...mapState({ myNumber: 'number' }), } }
mutations
提交mutation是更改Vuex中的store中的狀態(tài)的唯一方法。
mutation必須是同步的,如果要異步需要使用action。
每個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調(diào)函數(shù) (handler)。這個回調(diào)函數(shù)就是我們實際進行狀態(tài)更改的地方,并且它會接受 state 作為第一個參數(shù),提交載荷作為第二個參數(shù)。(提交荷載在大多數(shù)情況下應(yīng)該是一個對象),提交荷載也可以省略的。
const store = new Vuex.Store({ state: { number: 1 }, mutations: { //無提交載荷 Submit(state) { state.number++ } //提交載荷 SubmitN(state, payload) { state.number += payload.num } } })
使用方法;
你不能直接調(diào)用一個 mutation handler。這個選項更像是事件注冊:“當觸發(fā)一個類型為 Submit 的 mutation 時,調(diào)用此函數(shù)。”要喚醒一個 mutation handler,你需要以相應(yīng)的 type 調(diào)用 store.commit 方法:
//無提交載荷 this.$store.commit('Submit') //提交載荷 this.$store.commit('SubmitN', { num: 66 })
mapMutations 輔助函數(shù)
與其他輔助函數(shù)類似,你可以在組件中使用 this.$store.commit(‘xxx’) 提交 mutation,或者使用 mapMutations 輔助函數(shù)將組件中的 methods 映射為 store.commit 調(diào)用。
// 在需要使用的文件里 import { mapMutations } from 'vuex' export default { ? ? methods:{ ...mapMutations({ mySubmit: 'Submit', mySubmitN: 'SubmitN'}), }
actions
Action 類似于 mutation,不同在于:
Action 提交的是 mutation,而不是直接變更狀態(tài)。
Action 可以包含任意異步操作。
const store = new Vuex.Store({ state: { number: 0 }, mutations: { submit (state) { state.number++ } }, actions: { submit (context) { setInterval(function(){ context.commit('submit') }, 1000) } } })
注意:Action 函數(shù)接受一個與 store 實例具有相同方法和屬性的 context 對象,因此你可以調(diào)用 context.commit 提交一個 mutation,或者通過 context.state 和 context.getters 來獲取 state 和 getters。
使用方法:
分發(fā)actions,即Action 通過 store.dispatch 方法觸發(fā):
this.$store.dispatch('increment')
mapActions輔助函數(shù)
你在組件中使用 this.$store.dispatch('xxx') 分發(fā) action,或者使用 mapActions 輔助函數(shù)將組件的 methods 映射為 store.dispatch 調(diào)用
import { mapActions } from 'vuex' export default { //.. methods: { ...mapActions([ 'submit' ]), ...mapActions({ add: 'submit' }) } }
Modules
使用單一狀態(tài)樹,導(dǎo)致應(yīng)用的所有狀態(tài)集中到一個很大的對象。但是,當應(yīng)用變得很大時,store 對象會變得臃腫不堪。
為了解決以上問題,Vuex 允許我們將 store 分割到模塊(module)。每個模塊擁有自己的 state、mutation、action、getters、甚至是嵌套子模塊——從上至下進行類似的分割:
import Vue from 'vue' import Vuex from 'vuex' import getters from './getters' import app from './modules/app' import settings from './modules/settings' import user from './modules/user' Vue.use(Vuex) const store = new Vuex.Store({ modules: { app, settings, user }, getters }) export default store
使用模塊化的state,mutations,action,需在使用方法前加模塊名
如:
this.$store.state.user.number
this.$store.commit(‘user/xxx’)
this.$store.dispatch(‘user/xxx’)
getters
import Vue from 'vue' import Vuex from 'vuex' import getters from './getters' Vue.use(Vuex) const store = new Vuex.Store({ getters }) export default store
const getters = { sidebar: state => state.app.sidebar, device: state => state.app.device, token: state => state.user.token, username: state => state.user.username, empno: state => state.user.empno } export default getters
使用:this.$store.grtters.sidber , this.$store.grtters.device ,以此類推
mapGetters
import { mapGetters } from 'vuex' // mapGetters的作用:把getters映射為計算屬性 computed: { ...mapGetters(['getPartList']), // ...mapGetters({ // calcList: 'getPartList' // }), // calcList () { // // 注意:獲取getters的值,不需要加括號(當屬性使用) // return this.$store.getters.getPartList // }, }
總結(jié)
到此這篇關(guān)于Vuex中五個屬性以及使用方法詳解的文章就介紹到這了,更多相關(guān)Vuex五大屬性及使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue動態(tài)的 BreadCrumb 組件el-breadcrumb ElementUI詳解
這篇文章主要介紹了vue如何做一個動態(tài)的 BreadCrumb 組件,el-breadcrumb ElementUI2024-07-07
,本文通過圖文示例代碼相結(jié)合給大家介紹的非常詳細,需要的朋友可以參考下Vue使用ajax(axios)請求后臺數(shù)據(jù)的方法教程
在vue中經(jīng)常會用到數(shù)據(jù)請求,下面這篇文章主要給大家介紹了關(guān)于Vue使用ajax(axios)請求后臺數(shù)據(jù)的方法教程,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11使用Vue寫一個todoList事件備忘錄經(jīng)典小案例
學(xué)習(xí)了幾天Vue之后終于迎來了第一個小案例,todoList是非常常見地一個小案例,下面這篇文章主要給大家介紹了關(guān)于使用Vue寫一個todoList事件備忘錄經(jīng)典小案例的相關(guān)資料,需要的朋友可以參考下2022-10-10vue 解決移動端彈出鍵盤導(dǎo)致頁面fixed布局錯亂的問題
今天小編就為大家分享一篇vue 解決移動端彈出鍵盤導(dǎo)致頁面fixed布局錯亂的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11vue中Echarts使用動態(tài)數(shù)據(jù)的兩種實現(xiàn)方式
這篇文章主要介紹了vue中Echarts使用動態(tài)數(shù)據(jù)的兩種實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10