vuex的常見面試題-有解無憂

1.vuex是什么？怎么使用？哪種功能場景使用它？

答：Vuex 是一個專為 Vue.js 應用程式開發的狀態管理插件，（公共資料庫）

當專案遇到以下兩種場景時

1. 多個組件依賴于同一狀態時，

2. 來自不同組件的行為需要變更同一狀態，

解決的問題：多個視圖依賴同一個狀態來自不同視圖的行為需要變更同一狀態適用于中大型的單頁面應用，

2.vuex有哪幾種屬性？

答：有五種，分別是 State、 Getter、Mutation 、Action、 Module

state：存放公共資料的地方；

getter：獲取根據業務場景處理回傳的資料；

mutations：唯一修改state的方法，修改程序是同步的；

action：異步處理，通過分發操作觸發mutation；

module：將store模塊分割，減少代碼臃腫；

3.Vue.js中ajax請求代碼應該寫在組件的methods中還是vuex的actions中？

答：如果請求來的資料是不是要被其他組件公用，僅僅在請求的組件內使用，就不需要放入vuex 的state里，

如果被其他地方復用，這個很大幾率上是需要的，如果需要，請將請求放入action里，方便復用，

4.頁面重繪后vuex的state資料丟失怎么解決？

答：就是放在localStorage 或者就是sessionStorage ，或者借用輔助插vuex-persistedstate，

5.使用vuex的優勢是什么？

答：其實vuex中的所有功能都能夠通過其他的方式進行實作，只不過vuex對這些方法進行了整合處理，使用起來更加便捷，同時也便于維護，

6.Vuex中狀態儲存在哪里，怎么改變它？

答：存盤在state中，改變Vuex中的狀態的唯一途徑就是顯式地提交 (commit) mutation，

7.Vuex中狀態是物件時，使用時要注意什么？

答：因為物件是參考型別，復制后改變屬性還是會影響原始資料，這樣會改變state里面的狀態，是不允許，所以先用深度克隆復制物件，再修改，

8.怎么在組件中批量使用Vuex的state狀態？

答：使用mapState輔助函式, 利用物件展開運算子將state混入computed物件中

import {mapState} from 'vuex'
export default{
    computed:{
        ...mapState(['price','number'])
    }
}

9.Vuex中要從state派生一些狀態出來，且多個組件使用它，該怎么做，？

答：使用getter屬性，相當Vue中的計算屬性computed，只有原狀態改變派生狀態才會改變，

getter接收兩個引數，第一個是state，第二個是getters(可以用來訪問其他getter)，

const store = new Vuex.Store({
    state: {
        price: 10,
        number: 10,
        discount: 0.7,
    },
    getters: {
        total: state => {
            return state.price * state.number
        },
        discountTotal: (state, getters) => {
            return state.discount * getters.total
        }
    },
});

然后在組件中可以用計算屬性computed通過this.$store.getters.total這樣來訪問這些派生轉態，

computed: {
    total() {
        return this.$store.getters.total
    },
    discountTotal() {
        return this.$store.getters.discountTotal
    }
}

10.vuex中劃分模塊的好處

答：

state 更為容易管理保證了store完整的狀態數又避免了相互之間的state沖突
命名操作 state 都變得扁平直觀

11.vuex的store特性

答：

vuex 就是一個倉庫倉庫里放了很多物件其中state就是資料源存放地
state里面存放的資料是回應式的 vue組件從store讀取資料若是 store中的資料發生改變依賴這項資料的組件也會發生更新
通過 mapState 把全域的state 和 getters 映射到當前組件的 computed中

12.不使用Vuex會帶來什么問題

答：

可維護性會下降，想修改資料要維護三個地方；
可讀性會下降，因為一個組件里的資料，根本就看不出來是從哪來的；
增加耦合，大量的上傳派發，會讓耦合性大大增加，本來Vue用Component就是為了減少耦合，現在這么用，和組件化的初衷相背，

13.Vue.js中ajax請求代碼應該寫在組件的methods中還是vuex的actions中？

答：

如果請求來的資料是不是要被其他組件公用，僅僅在請求的組件內使用，就不需要放入vuex 的state里，
如果被其他地方復用，這個很大幾率上是需要的，如果需要，請將請求放入action里，方便復用，并包裝成promise回傳，在呼叫處用async await處理回傳的資料，如果不要復用這個請求，那么直接寫在vue檔案里很方便，

14.頁面重繪后vuex的state資料丟失怎么解決？

答：localStorage 或者就是sessionStorage ，或者借用輔助插vuex-persistedstate

15.vuex怎么知道state是通過mutation修改還是外部直接修改的？

答：通過$watch監聽mutation的commit函式中_committing是否為true

16.Vuex中action和mutation有什么相同點？

答：第二引數都可以接收外部提交時傳來的引數， this.$store.dispatch('ACTION_NAME',data)和this.$store.commit('SET_NUMBER',10)

17.用vue做的專案，用了vue的全家桶嗎？vue里面為什么不用jq？

答：vue+vue-router+vuex+axios+es6+sass

18.Vuex中action通常是異步的，那么如何知道action什么時候結束呢？

答：在action函式中回傳Promise，然后再提交時候用then處理

actions:{
    SET_NUMBER_A({commit},data){
        return new Promise((resolve,reject) =>{
            setTimeout(() =>{
                commit('SET_NUMBER',10);
                resolve();
            },2000)
        })
    }
}
this.$store.dispatch('SET_NUMBER_A').then(() => {
  // ...
})

19.Vuex中有兩個action，分別是actionA和actionB，其內都是異步操作，在actionB要提交actionA，需在actionA處理結束再處理其它操作，怎么實作？

答：利用ES6的async和await來實作，

actions:{
    async actionA({commit}){
        //...
    },
    async actionB({dispatch}){
        await dispatch ('actionA')//等待actionA完成
        // ... 
    }
}

20.在模塊中，getter和mutation接收的第一個引數state，是全域的還是模塊的？

答：第一個引數state是模塊的state，也就是區域的state，

21.在模塊中，getter和mutation和action中怎么訪問全域的state和getter？

答：

在getter中可以通過第三個引數rootState訪問到全域的state,可以通過第四個引數rootGetters訪問到全域的getter，
在mutation中不可以訪問全域的satat和getter，只能訪問到區域的state，
在action中第一個引數context中的context.rootState訪問到全域的state，context.rootGetters訪問到全域的getter，

22.怎么在帶命名空間的模塊內提交全域的mutation和action？

答：將 { root: true } 作為第三引數傳給 dispatch 或 commit 即可，

this.$store.dispatch('actionA', null, { root: true })
this.$store.commit('mutationA', null, { root: true })

23.怎么在帶命名空間的模塊內注冊全域的action？

答：

actions: {
    actionA: {
        root: true,
        handler (context, data) { ... }
    }
  }

24.怎么使用mapState，mapGetters，mapActions和mapMutations這些函式來系結帶命名空間的模塊？

答：首先使用createNamespacedHelpers創建基于某個命名空間輔助函式

import { createNamespacedHelpers } from 'vuex';
const { mapState, mapActions } = createNamespacedHelpers('moduleA');
export default {
    computed: {
        // 在 `module/moduleA` 中查找
        ...mapState({
            a: state => state.a,
            b: state => state.b
        })
    },
    methods: {
        // 在 `module/moduleA` 中查找
        ...mapActions([
            'actionA',
            'actionB'
        ])
    }
}

25.Vuex插件有用過嗎？怎么用簡單介紹一下？

答：Vuex插件就是一個函式，它接收 store 作為唯一引數，在Vuex.Store構造器選項plugins引入，在store/plugin.js檔案中寫入

export default function createPlugin(param){
    return store =>{
        //...
    }
}

然后在store/index.js檔案中寫入

import createPlugin from './plugin.js'
const myPlugin = createPlugin()
const store = new Vuex.Store({
  // ...
  plugins: [myPlugin]
})

26.在Vuex插件中怎么監聽組件中提交mutation和action？

答：

用Vuex.Store的實體方法subscribe監聽組件中提交mutation
用Vuex.Store的實體方法subscribeAction監聽組件中提交action 在store/plugin.js檔案中寫入

export default function createPlugin(param) {
    return store => {
        store.subscribe((mutation, state) => {
            console.log(mutation.type)//是那個mutation
            console.log(mutation.payload)
            console.log(state)
        })
        // store.subscribeAction((action, state) => {
        //     console.log(action.type)//是那個action
        //     console.log(action.payload)//提交action的引數
        // })
        store.subscribeAction({
            before: (action, state) => {//提交action之前
                console.log(`before action ${action.type}`)
            },
            after: (action, state) => {//提交action之后
                console.log(`after action ${action.type}`)
            }
        })
    }
}