Vuex面试题

Kw_Chng

已于 2023-02-01 13:25:59 修改

阅读量541

点赞数

分类专栏：前端面试题------框架Vue 文章标签：前端 javascript vue.js vue

于 2023-01-28 10:20:59 首次发布

本文链接：https://blog.csdn.net/weixin_43526403/article/details/128774987

版权

前端面试题------框架Vue 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

五、mutation和action有什么区别

六、vuex如何做持久化存储

一、Vuex是什么

Vuex是专门为Vuejs应用程序设计的状态管理工具。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

具体工作：vuex是一种状态管理机制，将全局组件的共享状态抽取出来为一个store，以一个单例模式存在，在任何一个组件中都可以使用，vuex更改state的唯一途径是通过mutation，mutation需要commit触发, action实际触发是mutation，其中mutation处理同步任务，action处理异步任务。

二、Vuex每个属性是干什么的

Vuex的属性包含以下6个：

1）state

state是存储的单一状态，是存储的基本数据，类似于组件的data

2）Getters

getters是store的计算属性，对state的加工，是派生出来的数据。就像computed计算属性一样，getter返回的值会根据它的依赖被缓存起来，且只有当它的依赖值发生改变才会被重新计算。

3）Mutations

mutations提交更改数据，使用store.commit方法更改state存储的状态，类似于methods。（mutations同步函数）

4）Actions

actions像一个装饰器，提交mutations，而不是直接变更状态。（actions可以包含任何异步操作）

5）Module

Module是store分割的模块，每个模块拥有自己的state、getters、mutations、actions。

6）辅助函数

Vuex提供了mapState、MapGetters、MapActions、mapMutations等辅助函数给开发在vm中处理store。

import {构造函数} from "vuex"


computed： {
    ...辅助函数()      辅助函数= mapGetters，mapState
}


methods： {
    ...辅助函数()      辅助函数= mapMutations, mapActions
}

三、Vuex的使用方法

1.安装vuex

2.在src下创建仓库store文件夹，并创建index.js集中管理仓库，在index.js里引入vuex：

import Vue from 'vue';
import Vuex from 'vuex';

使用插件：

Vue.use(Vuex);

构建一个Vuex实例并暴露：

const state = {};
const mutations = {};
const actions = {};
const getters = {};

//对外暴露Store类作为一个实例
export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters,
});

如果将vuex仓库模块化开发存储数据，就写成：

//引入小仓库
import home from './home/index';
import search from './search/index';
import detail from './detail/detail';
import users from './users/users';

//暴露一个Vuex实例
export default new Vuex.Store({
    //实现vuex仓库模块化开发存储数据
    modules:{
        home,
        search,
        detail,
        users
    }
})

3.在入口文件引入仓库并注册

// 引入
import store from '@/store';

// 注册
new Vue({
  render: h => h(App),
  store,
}).$mount('#app')

四、Vuex实现原理

通过以下三个方面来阐述vuex的实现原理：

store是怎么注册的?
mutation，commit 是怎么实现的?
辅助函数是怎么实现的?

1.store是怎么注册的?

我们看到Vuex在vue 的生命周期中的初始化钩子前插入一段 Vuex 初始化代码。给 Vue 的实例注入一个$store 的属性，这也就是为什么我们在 Vue 的组件中可以通过 this.$store.xxx, 访问到 Vuex 的各种数据和状态

2.mutations，commit 是怎么实现的

registerMutation 是对 store 的 mutation 的初始化，它接受 4 个参数，store为当前 Store 实例，type为 mutation 的 key，handler 为 mutation 执行的回调函数，path 为当前模块的路径。mutation 的作用就是同步修改当前模块的 state ，函数首先通过 type 拿到对应的 mutation 对象数组，然后把一个 mutation 的包装函数 push 到这个数组中，这个函数接收一个参数 payload，这个就是我们在定义 mutation 的时候接收的额外参数。这个函数执行的时候会调用 mutation 的回调函数，并通过 getNestedState(store.state, path) 方法得到当前模块的 state，和 playload 一起作为回调函数的参数。

commit的定义：commit 支持 3 个参数，type 表示 mutation 的类型，payload 表示额外的参数,根据 type 去查找对应的 mutation，如果找不到，则输出一条错误信息，否则遍历这个 type 对应的 mutation 对象数组，执行 handler(payload) 方法，这个方法就是之前定义的 wrappedMutationHandler(handler)，执行它就相当于执行了 registerMutation 注册的回调函数。

3.辅助函数

mapState在调用了 normalizeMap 函数后，把传入的 states 转换成由 {key, val} 对象构成的数组，接着调用 forEach 方法遍历这个数组，构造一个新的对象，这个新对象每个元素都返回一个新的函数 mappedState，函数对 val 的类型判断，如果 val 是一个函数，则直接调用这个 val 函数，把当前 store 上的 state 和 getters 作为参数，返回值作为 mappedState 的返回值；否则直接把 this.$store.state[val]作为 mappedState 的返回值

computed: mapState({
    name: state => state.name,
})
// 等同于
computed: {
    name: this.$store.state.name
}

五、mutation和action有什么区别

mutation：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于件：每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})

不能直接调用一个 mutation handler。这个选项更像是事件注册：“当触发一个类型为 increment 的 mutation 时，调用此函数。”要唤醒一个 mutation handler，你需要以相应的 type 调用 store.commit 方法：

store.commit('increment')

Action: Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

事实上在 vuex 里面 actions 只是一个架构性的概念，并不是必须的，说到底只是一个函数，你在里面想干嘛都可以，只要最后触发 mutation 就行。异步竞态怎么处理那是用户自己的事情。

vuex 真正限制你的只有 mutation 必须是同步的这一点（在 redux 里面就好像 reducer 必须同步返回下一个状态一样）。同步的意义在于这样每一个 mutation 执行完成后都可以对应到一个新的状态（和 reducer 一样），这样 devtools 就可以打个 snapshot 存下来，然后就可以随便 time-travel 了。如果你开着 devtool 调用一个异步的 action，你可以清楚地看到它所调用的 mutation 是何时被记录下来的，并且可以立刻查看它们对应的状态。