vuex的幾個屬性及其使用傳參方式
vuex概念
1.1、組件之間共享數(shù)據(jù)的方式
父 向 子 傳值:v-bind屬性綁值
子 向 父 傳值:v-on事件綁定
兄弟組件之間共享數(shù)據(jù):EventBus
- $on 接收數(shù)據(jù)的那個組件
- $emit 發(fā)送數(shù)據(jù)的那個組件
1.2、Vuex是什么
Vuex是實現(xiàn)組件全局狀態(tài)(數(shù)據(jù))管理的一種機制,可以方便的實現(xiàn)組件之間數(shù)據(jù)的共享。
1.3、使用Vuex同意管理狀態(tài)的好處
能夠在vuex中集中管理共享的數(shù)據(jù),易于開發(fā)和后期維護
能夠高效地實現(xiàn)組件之間的數(shù)據(jù)共享,提高開發(fā)效率
存儲在vuex中的數(shù)據(jù)都是響應式的,能夠?qū)崟r保持數(shù)據(jù)與頁面的同步。
1.4、什么樣的數(shù)據(jù)適合存儲到Vuex中
一般情況下,只有組件之間共享的數(shù)據(jù),才有必要存儲到vuex中;對于組件中的私有數(shù)據(jù),依然存儲在組件自身的data中即可。
vuex的基本使用
1、安裝vuex依賴包
npm i vuex --save
2、導入vuex包
import Vuex from 'vuex' Vue.use(Vuex)
3、創(chuàng)建stroe對象
const store = new Vuex.Store({ //state中存放的就是全局共享的數(shù)據(jù) state:{count:0} })
4、將store對象掛載到vue實例中
new Vue({ el:'#app', render:h => h(app), router, //將創(chuàng)建的共享數(shù)據(jù)對象,掛載到vue實例中 //所有的組件,就可以直接從stroe中獲取全局的數(shù)據(jù)了 store })
vuex的核心概念
1、vuex中的主要核心概念如下
State
State提供唯一的公共數(shù)據(jù)源, 所有共享的數(shù)據(jù)都要統(tǒng)放到Store的State中進行存儲。
export default new Vuex.Store({ state: { count: 0 }, })
組件訪問State中數(shù)據(jù)的**第一種方式:**Addition.vue
this.$store.state.全局數(shù)據(jù)名稱 <h3>當前最新的count值為:{{$store.state.count}}</h3>
組件訪問State中數(shù)據(jù)的第二種方式: Subtraction.vue
// 1. 從 vuex 中按需導入 mapState 函數(shù) import { mapState } from 'vuex'
通過剛才導入的 mapState 函數(shù),將當前組件需要的全局數(shù)據(jù),映射為當前組件的 computed 計算屬性:
<h3>當前最新的count值為:{{count}}</h3> // 2. 將全局數(shù)據(jù),映射為當前組件的計算屬性 computed: { ...mapState(['count']) }
Mutation
Mutation 用于變更 Store中 的數(shù)據(jù)。
① 只能通過 mutation 變更 Store 數(shù)據(jù),不可以直接操作 Store 中的數(shù)據(jù)。
② 通過這種方式雖然操作起來稍微繁瑣一些,但是可以集中監(jiān)控所有數(shù)據(jù)的變化。
第一種方式
(1)
// 定義 Mutation store.js const store = new Vuex.Store({ state: { count: 0 }, mutations: { add(state) { // 不要在 mutations 函數(shù)中,執(zhí)行異步操作 // setTimeout(() => { // state.count++ // }, 1000) // 變更狀態(tài) state.count++ } } })
在組件中訪問Mutation Addition.vue
<button @click="btnHandler1">+1</button> methods:{ //觸發(fā)mutation btnHandler1() { //觸發(fā) mutations 的第一種方式 this.$store.commit('add') }, }
(2)可以在觸發(fā) mutations 時傳遞參數(shù):
// 定義Mutation const store = new Vuex.Store({ state: { count: 0 }, mutations: { addN(state, step) { // 變更狀態(tài) state.count += step } } })
在組件中訪問Mutation Addition.vue
<button @click="btnHandler2">+N</button> methods: { btnHandler2() { // commit 的作用,就是調(diào)用 某個 mutation 函數(shù) 攜帶參數(shù) this.$store.commit('addN', 3) }, }
第二種方式
this.$store.commit() 是觸發(fā) mutations 的第一種方式,觸發(fā) mutations 的第二種方式:
// 1. 從 vuex 中按需導入 mapMutations 函數(shù) import { mapMutations } from 'vuex'
通過剛才導入的 mapMutations 函數(shù),將需要的 mutations 函數(shù),映射為當前組件的 methods 方法:
// 2. 將指定的 mutations 函數(shù),映射為當前組件的 methods 函數(shù) methods: { ...mapMutations(['add', 'addN']) }
完整代碼:
//store.js export default new Vuex.Store({ state: { count: 0 }, // 只有 mutations 中定義的函數(shù),才有權利修改 state 中的數(shù)據(jù) mutations: { //減減 sub(state) { state.count-- }, //攜帶參數(shù) subN(state, step) { state.count -= step } }, })
在組件中Subtraction.vue
<h3>當前最新的count值為:{{count}}</h3> <button @click="btnHandler1">-1</button> //<button @click="btnHandler2">-1</button> <button @click="subN(3)">-N</button> -----攜帶參數(shù) import { mapState, mapMutations} from 'vuex' computed: { ...mapState(['count']), }, methods: { ...mapMutations(['sub', 'subN']), btnHandler1() { this.sub() }, //btnHandler2() { //this.subN(3) //}, }
Action
(1)Action 用于處理異步任務。
如果通過異步操作變更數(shù)據(jù),**必須通過 Action,而不能使用 Mutation,**但是在 Action 中還是要通過觸發(fā)Mutation 的方式間接變更數(shù)據(jù)。
第一種方式
(1)處理異步任務
// 定義 Action const store = new Vuex.Store({ // ...省略其他代碼 mutations: { add(state) { state.count++ } }, actions: { addAsync(context) { setTimeout(() => { context.commit('add') }, 1000) } } })
在組件中Addition.vue
<button @click="btnHandler3">+1 Async</button> // 異步地讓 count 自增 +1 btnHandler3() { // 這里的 dispatch 函數(shù),專門用來觸發(fā) action this.$store.dispatch('addAsync') },
(2)攜帶參數(shù)
觸發(fā) actions 異步任務時攜帶參數(shù):
// 定義 Action const store = new Vuex.Store({ // ...省略其他代碼 mutations: { addN(state, step) { -------------攜帶參數(shù) state.count += step } }, actions: { addNAsync(context, step) { -------------攜帶參數(shù) setTimeout(() => { context.commit('addN', step) }, 1000) } } })
在組件中
<button @click="btnHandler4">+N Async</button> btnHandler4() { this.$store.dispatch('addNAsync', 5) }
第二種方式
this.$store.dispatch() 是觸發(fā) actions 的第一種方式,觸發(fā) actions 的第二種方式:
// 1. 從 vuex 中按需導入 mapActions 函數(shù) import { mapActions } from 'vuex'
通過剛才導入的 mapActions 函數(shù),將需要的 actions 函數(shù),映射為當前組件的 methods 方法:
// 2. 將指定的 actions 函數(shù),映射為當前組件的 methods 函數(shù) methods: { ...mapActions(['addASync', 'addNASync']) }
完整代碼
export default new Vuex.Store({ state: { count: 0 }, // 只有 mutations 中定義的函數(shù),才有權利修改 state 中的數(shù)據(jù) mutations: { //減減 sub(state) { state.count-- }, subN(state, step) { state.count -= step } }, //actions可以處理異步任務 actions: { subAsync(context) { setTimeout(() => { // 在 actions 中,不能直接修改 state 中的數(shù)據(jù); // 必須通過 context.commit() 觸發(fā)某個 mutation 才行 context.commit('sub') }, 1000) }, subNAsync(context, step) { setTimeout(() => { context.commit('subN', step) }, 1000) } }, })
組件Subtraction.vue
<h3>當前最新的count值為:{{count}} <button @click="subAsync">-1 Async</button> <button @click="subNAsync(5)">-N Async</button> import { mapState, mapMutations, mapActions } from 'vuex' methods: { ...mapActions(['subAsync', 'subNAsync']), }
**Getter **
不會修改state里面的數(shù)據(jù)
Getter 用于對 Store 中的數(shù)據(jù)進行加工處理形成新的數(shù)據(jù)。
① Getter 可以對 Store 中已有的數(shù)據(jù)加工處理之后形成新的數(shù)據(jù),類似 Vue 的計算屬性。
② Store 中數(shù)據(jù)發(fā)生變化,Getter 的數(shù)據(jù)也會跟著變化。
// 定義 Getter const store = new Vuex.Store({ state: { count: 0 }, getters: { showNum: state => { return '當前最新的數(shù)量是【'+ state.count +'】' } } })
使用getters的第一種方式
this.$store.getters.名稱
使用getters的第一種方式
{{showNum}} import { mapGetters } from 'vuex' computed: { ...mapGetters(['showNum']) }
- 只有 mutations 中定義的函數(shù),才有權利修改 state 中的數(shù)據(jù)
- 在 actions 中,不能直接修改 state 中的數(shù)據(jù);必須通過 context.commit() 觸發(fā)某個 mutation 才行
- commit 的作用,就是調(diào)用 某個 mutation 函數(shù)
- dispatch 函數(shù),專門用來觸發(fā) action
到此這篇關于vuex的幾個屬性及其使用傳參的文章就介紹到這了,更多相關vuex屬性使用傳參內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vue實例配置對象中el、template、render的用法
這篇文章主要介紹了vue實例配置對象中el、template、render的用法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11vue2從數(shù)據(jù)變化到視圖變化之nextTick使用詳解
這篇文章主要為大家介紹了vue2從數(shù)據(jù)變化到視圖變化之nextTick使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-09-09使用proxy實現(xiàn)一個更優(yōu)雅的vue【推薦】
Proxy 用于修改某些操作的默認行為,等同于在語言層面做出修改,所以屬于一種“元編程”。這篇文章主要介紹了用proxy實現(xiàn)一個更優(yōu)雅的vue,需要的朋友可以參考下2018-06-06使用el-table做成樹形結構并解決數(shù)據(jù)驅(qū)動視圖問題
這篇文章主要介紹了使用el-table做成樹形結構并解決數(shù)據(jù)驅(qū)動視圖問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07