Vue元件間通訊-Vuex
上回說到Vue元件間通訊,最後留了一個彩蛋~~~Vuex。Vuex是另一種元件通訊的方法,這節來說說Vuex(store倉庫)。
首先Vuex需要安裝,安裝的方式有很多,在這裡就不一一細說了。我是通過npm方式安裝的:
npm install vuex --save
安裝好之後需要再main.js裡全域性引入:
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)
new Vue({
el:'#app',
store,
components: { App },
template: '<App/>'})
這樣就完成了Vuex的安裝。接下來就是Vuex的用法了:
Vuex有五個屬性:State、Getter、Mutation、Action、Module。
1. State裡放入的是倉庫的資料,類似於js裡的data:
import Vue from 'vue' const modules = { state:{ name: '小白' } namespaced: true } export default modules
把Vuex放入src下的store檔案裡,建一個新的元件modules,然後把他丟擲來,被引入所需資料的元件:
<script> import { mapState }from 'vuex' export default { computed:{ // name(){ // return this.$store.state.name // } ...mapState(['name']) }, mounted(){ console.log(this.name) } } </script>
Vuex裡的資料需要從計算屬性(computed)裡獲取,我寫了兩種我常用的方法,都可以接收到資料,在mounted鉤子裡打印出的資料:
這裡只是舉個例子教大家如何用,不建議大家向我這樣去寫,Vuex應該用於所有業務邏輯的資料。不涉及到業務邏輯的,建議大家用上一章的方法:Vue元件間通訊。
2. Getters裡放入State裡資料的擴充套件資料,可以把它當作計算屬性。比如State裡有一個數組,就可以從Getters裡獲取到陣列的長度,或是取到物件裡面的屬性,用法和計算屬性類似:
import Vue from ‘vue’ const modules = { state:{ list:[ {id :1,content: '第一條'}, {id :2,content: '第二條'} ] }, getter:{ listLength: (state)=>{return state.list.length} },
namespaced: true
}
export default modules;
我在state裡存了一個數組,然後getters計算出state裡陣列的長度,接下來就是在元件裡接收了:
<script> import { mapGetters } from 'Vuex' export default { compoted:{ ...mapGetters(['listLength']) }, mounted(){ console.log(this.listLegth) } } </script>
開啟控制檯打印出2,就是list陣列的長度。
3. Mutations是儲存在倉庫的方法,這個方法只能用來改變state裡面的資料,而且想要改變state裡的資料只能用mutations裡的方法,並且它裡面的方法只能是同步的:
import Vue from 'vue' const modules = { state:{ name: '小黑' }, mutations:{ changeName(state){ state.name = '小白' } }, namespaced: true } export default modules;
還是那個例子,下面是元件呼叫方法:
<html> <div> {{ name }} <el-button @click="changeName">改變名字</el-button> </div> </html> <script> import { mapState,mapMutations } from 'vuex' export default { compoted:{ ...mapState(['name']) }, methods:{ ...mapMutations(['changeName']) } } </script>
頁面渲染後為:
點選按鈕之後為:
元件裡的按鈕通過呼叫Vuex裡的mutation方法將Vuex裡的state資料改變,只不過mutations方法只能同步的,涉及到介面的就不能在它裡面寫,怎麼辦的?往下看:
4. Actions和mutations一樣都是Vuex裡的方法,只不過他們有兩個最大的不同:
(1) Actions裡可以存放非同步方法,而Mutations只能放同步的;
(2) Actions裡不可以更改state裡的資料,state裡的資料只能在Mutations裡更改。
Actions是什麼方法?簡單的說,它就是一個Promise方法,通過不同的狀態執行不同的方法,執行方法可以是Actions裡的方法,也可以是Mutations裡的方法。
Actions我就不舉例子了,因為大部分都用於axios請求介面,簡單跟大家說說這個東西怎麼使用:
import Vue from 'vue' import request from '@/api/axios' const modules = { state:{ list:[] }, actions:{ getList({ commit }){ // 呼叫介面方法 request.getList() .then((response)=>{ // commit用來分配mutations方法 commit('getList',response) }) } }, mutations:{ getList(state,response){ state.list = response.data } } }
簡單利用actions非同步方法分配給mutations方法,然後在mutations方法裡給state裡的資料賦值,取到介面資料。
commit用於分配mutations方法,dispatch用於分配actions方法,都需要傳參進去。
元件呼叫其實和呼叫mutations方法類似:
<script> import { mapState,mapActions } from 'vuex' export default { computed:{ ...mapState(['list']) }, mounted(){ this.getList() }, methods:{ ...mapActions(['getList']) } } </script>
這樣就基本完成了vuex傳值。
5. module可以把vuex分為不同的模組,使業務邏輯變得更清晰,更準確。在上面的程式碼裡,有const modules,給它不同的名字就是分為不同的模組。不同的module可以存入不同的資料和方法,使用起來非常方