您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“vuex中mapState,mapGetters,mapActions,mapMutations怎么用”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“vuex中mapState,mapGetters,mapActions,mapMutations怎么用”這篇文章吧。
一、介紹 vuex里面的四大金剛:State, Mutations,Actions,Getters
何為四大金剛?
1.State (這里可以是 小寫的 state,跟官網(wǎng)保持一致,采用大寫,因?yàn)閭€人習(xí)慣,后面的代碼介紹采用小寫)
vuex的狀態(tài)管理,需要依賴它的狀態(tài)樹,官網(wǎng)說:
Vuex 使用單一狀態(tài)樹——是的,用一個對象就包含了全部的應(yīng)用層級狀態(tài)。至此它便作為一個“唯一數(shù)據(jù)源 (SSOT)”而存在。這也意味著,每個應(yīng)用將僅僅包含一個 store 實(shí)例。單一狀態(tài)樹讓我們能夠直接地定位任一特定的狀態(tài)片段,在調(diào)試的過程中也能輕易地取得整個當(dāng)前應(yīng)用狀態(tài)的快照。
簡單粗暴理解: 我們要把我們需要做狀態(tài)管理的量放到這里來,然后在后面的操作動它
我們來聲明一個state:
const state = { blogTitle: '邇伶貳blog', views: 10, blogNumber: 100, total: 0, todos: [ {id: 1, done: true, text: '我是碼農(nóng)'}, {id: 2, done: false, text: '我是碼農(nóng)202號'}, {id: 3, done: true, text: '我是碼農(nóng)202號'} ] }
2. Mutation
我們有了state狀態(tài)樹,我們要改變它的狀態(tài)(值),就必須用vue指定唯一方法 mutation,官網(wǎng)說:
更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation。Vuex 中的 mutation 非常類似于事件:每個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調(diào)函數(shù) (handler)。
簡單粗暴理解:任何不以mutation的方式改變state的值,都是耍流氓(違法)
我們來一個mutation:
const mutation = { addViews (state) { state.views++ }, blogAdd (state) { state.blogNumber++ }, clickTotal (state) { state.total++ } }
3.Action
action 的作用跟mutation的作用是一致的,它提交mutation,從而改變state,是改變state的一個增強(qiáng)版,官網(wǎng)說:
Action 類似于 mutation,不同在于:
Action 提交的是 mutation,而不是直接變更狀態(tài)。
Action 可以包含任意異步操作。
簡單粗暴理解: 額,這總結(jié)的差不多了,就這樣理解吧!
我們來一個action:
const actions = { addViews ({commit}) { commit('addViews') }, clickTotal ({commit}) { commit('clickTotal') }, blogAdd ({commit}) { commit('blogAdd') } }
4.Getter
官網(wǎng)說:有時候我們需要從 store 中的 state 中派生出一些狀態(tài),例如對列表進(jìn)行過濾并計(jì)數(shù)。減少我們對這些狀態(tài)數(shù)據(jù)的操作
簡單粗暴理解:狀態(tài)樹上的數(shù)據(jù)比較復(fù)雜了,我們使用的時候要簡化操作,上面的state.todos 是一個對象,在組件中挑不同的數(shù)據(jù)時,需要對其做下處理,這樣每次需要一次就處理一次,我們簡化操作,將其在getter中處理好,然后export 一個方法;(額,好像說復(fù)雜了)
我們來一個getter:
const getters = { getToDo (state) { return state.todos.filter(item => item.done === true) // filter 迭代過濾器 將每個item的值 item.done == true 挑出來, 返回的是一個數(shù)組 } }
二、使用
學(xué)不用,傻學(xué),沒啥用,我們得用起來:
1、src 下新建文件
我們在項(xiàng)目(vue-cli 腳手架)下 src 文件夾下新建一個 store,在這個store下新建 index.js 文件,將上面的代碼填入,如下面完整的內(nèi)容:
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state = { blogTitle: '邇伶貳blog', views: 10, blogNumber: 100, total: 0, todos: [ {id: 1, done: true, text: '我是碼農(nóng)'}, {id: 2, done: false, text: '我是碼農(nóng)202號'}, {id: 3, done: true, text: '我是碼農(nóng)202號'} ] } const actions = { addViews ({commit}) { commit('addViews') }, clickTotal ({commit}) { commit('clickTotal') }, blogAdd ({commit}) { commit('blogAdd') } } const mutations = { addViews (state) { state.views++ }, blogAdd (state) { state.blogNumber++ }, clickTotal (state) { state.total++ } } const getters = { getToDo (state) { return state.todos.filter(item => item.done === true) // filter 迭代過濾器 將每個item的值 item.done == true 挑出來, 返回的是一個數(shù)組 } } export default new Vuex.Store({ state, actions, mutations, getters }) // 將四大金剛掛載到 vuex的Store下
2、main.js 導(dǎo)入文件
import Vue from 'vue' import App from './App' import router from './router/router.js' // 引入 狀態(tài)管理 vuex import store from './store' // 引入elementUI import ElementUI from 'element-ui' // 引入element的css import 'element-ui/lib/theme-chalk/index.css' // 引入font-awesome的css import 'font-awesome/css/font-awesome.css' // 引入自己的css import './assets/css/custom-styles.css' Vue.config.productionTip = false Vue.use(ElementUI) /* eslint-disable no-new */ new Vue({ el: '#app', router, store, template: '<App/>', components: { App } })
請著重看加粗部分,非加粗部分是import 其他項(xiàng)目功能
3、組件中使用
先上這個組件代碼:
<template> <div> <h5>vuex的狀態(tài)管理數(shù)據(jù)</h5> <h6>博客標(biāo)題</h6> <i> {{this.$store.state.blogTitle}} </i> <h6>todos里面的信息</h6> <ul> <li v-for = "item in todosALise" :key="item.id"> <span>{{item.text}}</span> <br> <span>{{item.done}}</span> </li> </ul> <h6>初始化訪問量</h6> <p> mapState方式 {{viewsCount}};<br> 直接使用views {{this.$store.state.views}} </p> <h5>blogNumber數(shù)字 </h5> <span>state中blogNumber:{{this.$store.state.blogNumber}}</span> <h5>總計(jì)</h5> <span>state中total:{{this.$store.state.total}}</span> <p> <button @click="totalAlise">點(diǎn)擊增加total</button> </p> </div> </template> <style> </style> <script> import { mapState, mapGetters, mapActions, mapMutations } from 'vuex' export default { data () { return { checked: true } }, created () { // this.$store.dispatch('addViews') // 直接通過store的方法 觸發(fā)action, 改變 views 的值 this.blogAdd() // 通過mapActions 觸發(fā)mutation 從而commit ,改變state的值 }, computed: { ...mapState({ viewsCount: 'views' }), ...mapGetters({ todosALise: 'getToDo' // getToDo 不是字符串,對應(yīng)的是getter里面的一個方法名字 然后將這個方法名字重新取一個別名 todosALise }) }, methods: { ...mapMutations({ totalAlise: 'clickTotal' // clickTotal 是mutation 里的方法,totalAlise是重新定義的一個別名方法,本組件直接調(diào)用這個方法 }), ...mapActions({ blogAdd: 'blogAdd' // 第一個blogAdd是定義的一個函數(shù)別名稱,掛載在到this(vue)實(shí)例上,后面一個blogAdd 才是actions里面函數(shù)方法名稱 }) } } </script>
mapState, mapGetters, mapActions, mapMutations
這些名字呢,是對應(yīng)四大金剛的一個輔助函數(shù),
a).mapState,官網(wǎng)說:
當(dāng)一個組件需要獲取多個狀態(tài)時候,將這些狀態(tài)都聲明為計(jì)算屬性會有些重復(fù)和冗余。為了解決這個問題,我們可以使用 mapState 輔助函數(shù)幫助我們生成計(jì)算屬性,讓你少按幾次鍵:
對于官網(wǎng)給出的例子,截個圖,供學(xué)習(xí),詳情請進(jìn)官網(wǎng):https://vuex.vuejs.org/zh-cn/state.html , 我記錄下官網(wǎng)說的少的 ...mapState() 方法
vue 現(xiàn)在好多例子,都是用es6 寫的,es6中增加了好多神兵利器,我們也得用用。我們也要用‘對象展開運(yùn)算符',這個具體的用法,請參考具體的學(xué)習(xí)資料,我們主要講講 ...mapState({...}) 是什么鬼。
下面實(shí)例代碼中:
html:
<p> mapState方式 {{viewsCount}};<br> 直接使用views {{this.$store.state.views}} </p>
js:
...mapState({ viewsCount: 'views' }),
我們需要使用一個工具函數(shù)將多個對象合并為一個,這個 ... 方法就合適了,將多個函數(shù)方法合并成一個對象,并且將vuex中的this.$store.views
映射到this.viewsCount (this -> vue)上面來,這樣在多個狀態(tài)時可以避免重復(fù)使用,而且當(dāng)映射的值和state 的狀態(tài)值是相等的時候,可以是直接使用
...mapState({ 'views' }),
b).mapMutations 其實(shí)跟mapState 的作用是類似的,將組件中的 methods 映射為 store.commit 調(diào)用
上面的代碼:
html:
<span>{{this.$store.state.total}}</span> <p> <button @click="totalAlise">點(diǎn)擊增加total</button> </p>
js:
...mapMutations({ totalAlise: 'clickTotal' // clickTotal 是mutation 里的方法,totalAlise是重新定義的一個別名方法,本組件直接調(diào)用這個方法 })
c). mapActions, action的一個輔助函數(shù),將組件的 methods 映射為 store.dispatch 調(diào)用
上例代碼:
html:
<h5>blogNumber數(shù)字 </h5> <span>state中blogNumber:{{this.$store.state.blogNumber}}</span>
js:
方法調(diào)用:
created () { // this.$store.dispatch('blogAdd') // 直接通過store的方法 觸發(fā)action, 改變 views 的值 this.blogAdd() // 通過mapActions 觸發(fā)mutation 從而commit ,改變state的值 },
方法定義:
...mapActions({ blogAdd: 'blogAdd' // blogAdd是定義的一個函數(shù)別名稱,掛載在到this(vue)實(shí)例上,blogAdd 才是actions里面函數(shù)方法名稱 })
d). mapGetter 僅僅是將 store 中的 getter 映射到局部計(jì)算屬性:
html:
<h6>todos里面的信息</h6> <ul> <li v-for = "item in todosALise" :key="item.id"> // <li v-for = "item in this.$store.state.todos" :key="item.id"> 這里就是直接讀取store的值,沒有做過濾操作,如果需要過濾。 還需要單獨(dú)寫方法操作 <span>{{item.text}}</span> <br> <span>{{item.done}}</span> </li> </ul>
js:
...mapGetters({ todosALise: 'getToDo' // getToDo 不是字符串,對應(yīng)的是getter里面的一個方法名字 然后將這個方法名字重新取一個別名 todosALise }),
這個 getToDo 是在getters 定義的一個方法,它將todos 里的對象屬性done為true的之過濾出來
getToDo (state) { return state.todos.filter(item => item.done === true) // filter 迭代過濾器 將每個item的值 item.done == true 挑出來, 返回的是一個數(shù)組 }
上面代碼操作后的效果截圖:
以上是“vuex中mapState,mapGetters,mapActions,mapMutations怎么用”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。