Vuex面試題匯總(推薦)
我要評論什么是Vuex？
Vuex 是一個專為 Vue.js 應用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應用的所有組件的狀態(tài)，而更改狀態(tài)的唯一方法是提交mutation，例this.$store.commit('SET_VIDEO_PAUSE', video_pause，SET_VIDEO_PAUSE為mutation屬性中定義的方法。
Vuex解決了什么問題？
解決兩個問題
- 多個組件依賴于同一狀態(tài)時，對于多層嵌套的組件的傳參將會非常繁瑣，并且對于兄弟組件間的狀態(tài)傳遞無能為力。
- 來自不同組件的行為需要變更同一狀態(tài)。以往采用父子組件直接引用或者通過事件來變更和同步狀態(tài)的多份拷貝。以上的這些模式非常脆弱，通常會導致無法維護的代碼。
什么時候用Vuex？
當項目遇到以下兩種場景時
- 多個組件依賴于同一狀態(tài)時。
- 來自不同組件的行為需要變更同一狀態(tài)。
Vuex的5個核心屬性是什么？
分別是 state、getter、mutation、action、module 。
Vuex中狀態(tài)儲存在哪里，怎么改變它？
存儲在state中，改變Vuex中的狀態(tài)的唯一途徑就是顯式地提交 (commit) mutation。
Vuex中狀態(tài)是對象，使用時候注意什么？
因為對象是引用類型，復制后改變屬性還是會影響原始數(shù)據(jù)，這樣會改變state里面的狀態(tài)，是不允許，所以先用深度克隆復制對象，再修改。
怎么在組件中批量使用Vuex的state狀態(tài)？
使用mapState輔助函數(shù), 利用對象展開運算符將state混入computed對象中
import {mapState} from 'vuex'
export default{
computed:{
...mapState(['price','number'])
}
}
Vuex中要從state派生一些狀態(tài)出來，且多個組件使用它，該怎么做，？
使用getter屬性，相當Vue中的計算屬性computed，只有原狀態(tài)改變派生狀態(tài)才會改變。
getter接收兩個參數(shù)，第一個是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這樣來訪問這些派生轉態(tài)。
computed: {
total() {
return this.$store.getters.total
},
discountTotal() {
return this.$store.getters.discountTotal
}
}
怎么通過getter來實現(xiàn)在組件內可以通過特定條件來獲取state的狀態(tài)？
通過讓getter返回一個函數(shù)，來實現(xiàn)給getter傳參。然后通過參數(shù)來進行判斷從而獲取state中滿足要求的狀態(tài)。
const store = new Vuex.Store({
state: {
todos: [
{ id: 1, text: '...', done: true },
{ id: 2, text: '...', done: false }
]
},
getters: {
getTodoById: (state) => (id) =>{
return state.todos.find(todo => todo.id === id)
}
},
});
然后在組件中可以用計算屬性computed通過this.$store.getters.getTodoById(2)這樣來訪問這些派生轉態(tài)。
computed: {
getTodoById() {
return this.$store.getters.getTodoById
},
}
mounted(){
console.log(this.getTodoById(2).done)//false
}
怎么在組件中批量使用Vuex的getter屬性
使用mapGetters輔助函數(shù), 利用對象展開運算符將getter混入computed 對象中
import {mapGetters} from 'vuex'
export default{
computed:{
...mapGetters(['total','discountTotal'])
}
}
怎么在組件中批量給Vuex的getter屬性取別名并使用
使用mapGetters輔助函數(shù), 利用對象展開運算符將getter混入computed 對象中
import {mapGetters} from 'vuex'
export default{
computed:{
...mapGetters(
myTotal:'total',
myDiscountTotal:'discountTotal',
)
}
}
在Vuex的state中有個狀態(tài)number表示貨物數(shù)量，在組件怎么改變它。
首先要在mutations中注冊一個mutation
const store = new Vuex.Store({
state: {
number: 10,
},
mutations: {
SET_NUMBER(state,data){
state.number=data;
}
},
});
在組件中使用this.$store.commit提交mutation，改變number
this.$store.commit('SET_NUMBER',10)
在Vuex中使用mutation要注意什么。
mutation 必須是同步函數(shù)
在組件中多次提交同一個mutation，怎么寫使用更方便。
使用mapMutations輔助函數(shù),在組件中這么使用
methods:{
...mapMutations({
setNumber:'SET_NUMBER',
})
}
然后調用this.setNumber(10)相當調用this.$store.commit('SET_NUMBER',10)
Vuex中action和mutation有什么區(qū)別？
- action 提交的是 mutation，而不是直接變更狀態(tài)。mutation可以直接變更狀態(tài)。
- action 可以包含任意異步操作。mutation只能是同步操作。
- 提交方式不同，action 是用this.$store.dispatch('ACTION_NAME',data)來提交。mutation是用this.$store.commit('SET_NUMBER',10)來提交。
- 接收參數(shù)不同，mutation第一個參數(shù)是state，而action第一個參數(shù)是context，其包含了
{
state, // 等同于 `store.state`，若在模塊中則為局部狀態(tài)
rootState, // 等同于 `store.state`，只存在于模塊中
commit, // 等同于 `store.commit`
dispatch, // 等同于 `store.dispatch`
getters, // 等同于 `store.getters`
rootGetters // 等同于 `store.getters`，只存在于模塊中
}
Vuex中action和mutation有什么相同點？
第二參數(shù)都可以接收外部提交時傳來的參數(shù)。
this.$store.dispatch('ACTION_NAME',data)和this.$store.commit('SET_NUMBER',10)
在組件中多次提交同一個action，怎么寫使用更方便。
使用mapActions輔助函數(shù),在組件中這么使用
methods:{
...mapActions({
setNumber:'SET_NUMBER',
})
}
然后調用this.setNumber(10)相當調用this.$store.dispatch('SET_NUMBER',10)
Vuex中action通常是異步的，那么如何知道action什么時候結束呢？
在action函數(shù)中返回Promise，然后再提交時候用then處理
actions:{
SET_NUMBER_A({commit},data){
return new Promise((resolve,reject) =>{
setTimeout(() =>{
commit('SET_NUMBER',10)
},2000)
}
)
}
}
this.$store.dispatch('SET_NUMBER_A').then(() => {
// ...
})
Vuex中有兩個action，分別是actionA和actionB，其內都是異步操作，在actionB要提交actionA，需在actionA處理結束再處理其它操作，怎么實現(xiàn)？
利用ES6的async和await來實現(xiàn)。
actions:{
async actionA({commit}){
//...
},
async actionB({dispatch}){
await dispatch ('actionA')//等待actionA完成
// ...
}
}
有用過Vuex模塊嗎，為什么要使用，怎么使用。
有，因為使用單一狀態(tài)樹，應用的所有狀態(tài)會集中到一個比較大的對象。當應用變得非常復雜時，store 對象就有可能變得相當臃腫。所以將 store 分割成模塊（module）。每個模塊擁有自己的 state、mutations、actions、getters，甚至是嵌套子模塊，從上至下進行同樣方式的分割。
在module文件新建moduleA.js和moduleB.js文件。在文件中寫入
const state={
//...
}
const getters={
//...
}
const mutations={
//...
}
const actions={
//...
}
export default{
state,
getters,
mutations,
actions
}
然后再index.js引入模塊
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
import moduleA from './module/moduleA'
import moduleB from './module/moduleB'
const store = new Vuex.Store({
modules:{
moduleA,
moduleB
}
})
export default store
在模塊中，getter和mutation接收的第一個參數(shù)state，是全局的還是模塊的？
第一個參數(shù)state是模塊的state，也就是局部的state。
在模塊中，getter和mutation和action中怎么訪問全局的state和getter
- 在getter中可以通過第三個參數(shù)rootState訪問到全局的state,可以通過第四個參數(shù)rootGetters訪問到全局的getter。
- 在mutation中不可以訪問全局的satat和getter，只能訪問到局部的state。
- 在action中第一個參數(shù)context中的context.rootState訪問到全局的state，context.rootGetters訪問到全局的getter。
在組件中怎么訪問Vuex模塊中的getter和state,怎么提交mutation和action？
- 直接通過this.$store.getters和this.$store.state來訪問模塊中的getter和state。
- 直接通過this.$store.commit('mutationA',data)提交模塊中的mutation。
- 直接通過this.$store.dispatch('actionA,data')提交模塊中的action。
用過Vuex模塊的命名空間嗎？為什么使用，怎么使用。
默認情況下，模塊內部的action、mutation和getter是注冊在全局命名空間，如果多個模塊中action、mutation的命名是一樣的，那么提交mutation、action時，將會觸發(fā)所有模塊中命名相同的mutation、action。
這樣有太多的耦合，如果要使你的模塊具有更高的封裝度和復用性，你可以通過添加namespaced: true 的方式使其成為帶命名空間的模塊。
export default{
namespaced: true,
state,
getters,
mutations,
actions
}
怎么在帶命名空間的模塊內提交全局的mutation和action？
將 { root: true } 作為第三參數(shù)傳給 dispatch 或 commit 即可。
this.$store.dispatch('actionA', null, { root: true })
this.$store.commit('mutationA', null, { root: true })
怎么在帶命名空間的模塊內注冊全局的action？
actions: {
actionA: {
root: true,
handler (context, data) { ... }
}
}
組件中怎么提交modules中的moduleA中的mutationA？
this.$store.commit('moduleA/mutationA',data)
怎么使用mapState，mapGetters，mapActions和mapMutations這些函數(shù)來綁定帶命名空間的模塊？
首先使用createNamespacedHelpers創(chuàng)建基于某個命名空間輔助函數(shù)
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'
])
}
}
Vuex插件有用過嗎？怎么用簡單介紹一下？
Vuex插件就是一個函數(shù)，它接收 store 作為唯一參數(shù)。在Vuex.Store構造器選項plugins引入。
在store/plugin.js文件中寫入
export default function createPlugin(param){
return store =>{
//...
}
}
然后在store/index.js文件中寫入
import createPlugin from './plugin.js'
const plugin = createPlugin()
const store = new Vuex.Store({
// ...
plugins: [myPlugin]
})
在Vuex插件中怎么監(jiān)聽組件中提交mutation和action？
- 用Vuex.Store的實例方法subscribe監(jiān)聽組件中提交mutation
- 用Vuex.Store的實例方法subscribeAction監(jiān)聽組件中提交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的參數(shù)
// })
store.subscribeAction({
before: (action, state) => {//提交action之前
console.log(`before action ${action.type}`)
},
after: (action, state) => {//提交action之后
console.log(`after action ${action.type}`)
}
})
}
}
然后在store/index.js文件中寫入
import createPlugin from './plugin.js'
const plugin = createPlugin()
const store = new Vuex.Store({
// ...
plugins: [myPlugin]
})
在v-model上怎么用Vuex中state的值？
需要通過computed計算屬性來轉換。
<input v-model="message">
// ...
computed: {
message: {
get () {
return this.$store.state.message
},
set (value) {
this.$store.commit('updateMessage', value)
}
}
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了關于VUE的面試題(小結)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-01-16- 這篇文章主要介紹了Vue.js的高級面試題(附答案)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2020-01-13
這篇文章主要介紹了12道vue高頻原理面試題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-12-27- 這篇文章主要介紹了web前端面試中關于VUE的面試題（含答案）,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來2019-11-08
這篇文章主要介紹了面試必備的13道可以舉一反三的Vue面試題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來2019-08-05- 這篇文章主要介紹了Vue面試題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-07-01
- 這篇文章主要介紹了Vue 高頻基礎面試題,在前端面試中經(jīng)常會遇到，今天小編特意整理分享到腳本之家平臺，需要的朋友可以參考下2020-02-12
