vueX

🌟Vuex的概述

什么是vuex

Vuex是實現組件全局狀態（數據）管理的一種機制，可以方便的實現組件之間的數據共享

Vuex管理數據的優點

A.能夠在vuex中集中管理共享的數據，便于開發和后期進行維護

B.能夠高效的實現組件之間的數據共享，提高開發效率

C.存儲在vuex中的數據是響應式的，當數據發生改變時，頁面中的數據也會同步更新

🌟Vuex的基本使用步驟

1.安裝 npm i vuex --save

2.在src文件目錄下新建store>index.js文件

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store();export default store;

3.口文件里面引入store，然后再全局注入

import store from './store'//引入storenew Vue({el: '#app',router,store,//使用storetemplate: '<App/>',components: { App }
})

4.使用

在state中定義數據

Vue.use(Vuex)
const store = new Vuex.Store({state:{count:1}
})

Getter相當于vue中的computed計算屬性，getter 的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變才會被重新計算，Getters 可以用于監聽、state中的值的變化，返回計算后的結果

 getters:{getCount:state=>{return state.count+1}

給action注冊事件處理函數，當這個函數被觸發時候，將狀態提交到mutations中處理。actions里面自定義的函數接收一個context參數和要變化的形參

actions:{addFun(context,n){context.commit('add',n)} ，removeFun(context){context.commit("remove")}}

mutations是一個對象里。面的方法 都是同步事務，是更改state初始狀態的唯一合法方法，具體的用法就是給里面的方法傳入參數state或額外的參數

  mutations:{add（state，n){state.count = state.count+n},remove(){state.count=state.count-1}},

dispatch：含有異步操作，例如向后臺提交數據，寫法： this.$store.dispatch(‘action方法名’,值)

commit：同步操作，寫法：this.$store.commit(‘mutations方法名’,值)

export defult{data(){return{mag:'aaa'}},methods:{addCount(){this.$store.commit('add')},reoveCount:function(){this.$store.commit('remove')},addFun(){let n =2;this.$store.dispatch('addFun',n)},removeFun(){this.$store.dispatch('removeFun')}}
}

🌟Vuex中的核心特性

State

State提供唯一的公共數據源，所有共享的數據都要統一放到Store中的State中存儲

在組件中訪問State的方式：

1).this.$store.state.全局數據名稱  如：this.$store.state.count
2).先按需導入mapState函數： import { mapState } from 'vuex'
然后數據映射為計算屬性： computed:{ ...mapState(['全局數據名稱']) }

Mutation

Mutation用于修改變更$store中的數據

使用方式第一種

打開store.js文件，在mutations中添加代碼如下

mutations: {add(state,step){//第一個形參永遠都是state也就是$state對象//第二個形參是調用add時傳遞的參數state.count+=step;}}

然后在Addition.vue中給按鈕添加事件代碼如下：

<button @click="Add">+1</button>methods:{Add(){//使用commit函數調用mutations中的對應函數，//第一個參數就是我們要調用的mutations中的函數名//第二個參數就是傳遞給add函數的參數this.$store.commit('add',10)}
}

使用mutations的第二種方式：

import { mapMutations } from 'vuex'methods:{...mapMutations(['add'])
}

import { mapState,mapMutations } from 'vuex'export default {data() {return {}},methods:{//獲得mapMutations映射的sub函數...mapMutations(['sub']),//當點擊按鈕時觸發Sub函數Sub(){//調用sub函數完成對數據的操作this.sub(10);}},computed:{...mapState(['count'])}
}

Action

在mutations中不能編寫異步的代碼，會導致vue調試器的顯示出錯。
在vuex中我們可以使用Action來執行異步操作。

操作步驟第一種

打開store.js文件，修改Action，如下：

actions: {addAsync(context,step){setTimeout(()=>{context.commit('add',step);},2000)}
}

然后在Addition.vue中給按鈕添加事件代碼如下

<button @click="AddAsync">...+1</button>methods:{AddAsync(){this.$store.dispatch('addAsync',5)}
}

操作步驟第二種

import { mapActions } from 'vuex'methods:{...mapMutations(['subAsync'])
}

import { mapState,mapMutations,mapActions } from 'vuex'export default {data() {return {}},methods:{//獲得mapMutations映射的sub函數...mapMutations(['sub']),//當點擊按鈕時觸發Sub函數Sub(){//調用sub函數完成對數據的操作this.sub(10);},//獲得mapActions映射的addAsync函數...mapActions(['subAsync']),asyncSub(){this.subAsync(5);}},computed:{...mapState(['count'])}
}

Getter

Getter用于對Store中的數據進行加工處理形成新的數據
它只會包裝Store中保存的數據，并不會修改Store中保存的數據，當Store中的數據發生變化時，Getter生成的內容也會隨之變化

使用

打開store.js文件，添加getters，然后打開Addition.vue中，添加插值表達式使用getters

export default new Vuex.Store({.......getters:{//添加了一個showNum的屬性showNum : state =>{return '最新的count值為：'+state.count;}}
})

或者也可以在Addition.vue中，導入mapGetters，并將之映射為計算屬性

import { mapGetters } from 'vuex'
computed:{...mapGetters(['showNum'])
}

🌟寫在最后

下方是小編開設的公眾號，每天為大家推送前端硬核知識！期待您的加入哦！

?$原創不易，大佬們給個支持！！！$

👍 $點贊，你的認可是我創作的動力！$

?? $收藏，你的青睞是我努力的方向！$

?? $評論，你的意見是我進步的財富！$