Vuex 的哲学及常见面试题

最新推荐文章于 2024-04-06 10:31:37 发布

航小码

最新推荐文章于 2024-04-06 10:31:37 发布

阅读量145

点赞数 1

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/html5_mylove/article/details/121790482

版权

Vuex是Vue的集中状态管理库，采用MVC模式，强制所有状态变更通过action->mutation->state流程。它解决了复杂组件交互中的状态管理问题，提高开发效率。Vuex的store通过mixin注入组件，state和getters借助Vue的响应式系统实现。常见的面试题包括Vuex的属性、state与getter特性、mutation与action的区别，以及何时使用Vuex。

摘要由CSDN通过智能技术生成

Vuex 的哲学

Vuex是专门为Vue服务，用于管理页面的数据状态、提供统一数据操作的生态系统，相当于数据库mongoDB，MySQL等，任何组件都可以存取仓库中的数据。

其中vuex类似的还是有Redux,Redux大多用于React,针对Redux后续在做补充，现在就让我们好好了解下Vuex到底是个啥东西？

概念理解性（必读）

Vuex采用MVC模式中的Model层，规定所有的数据必须通过action--->mutaion--->state这个流程进行来改变状态的。再结合Vue的数据视图双向绑定实现页面的更新。统一页面状态管理，可以让复杂的组件交互变的简单清晰，同时在调试时也可以通过DEVtools去查看状态。

在当前前端的spa模块化项目中不可避免的是某些变量需要在全局范围内引用，此时父子组件的传值，子父组件间的传值，兄弟组件间的传值成了我们需要解决的问题。虽然vue中提供了props（父传子）commit（子传父）兄弟间也可以用localstorage和sessionstorage。但是这种方式在项目开发中带来的问题比他解决的问题（难管理，难维护，代码复杂，安全性低）更多。vuex的诞生也是为了解决这些问题，从而大大提高我们vue项目的开发效率。

抛出问题使用Vuex只需执行 Vue.use(Vuex)，并在Vue的配置中传入一个store对象的示例，store是如何实现注入的？state内部是如何实现支持模块配置和模块嵌套的？在执行dispatch触发action（commit同理）的时候，只需传入（type, payload），action执行函数中第一个参数store从哪里获取的？如何区分state是外部直接修改，还是通过mutation方法修改的？调试时的“时空穿梭”功能是如何实现的？

vue和vuex的区别与联系

看一下这个vue响应式的例子，vue中的data 、methods、computed，可以实现响应式。

视图通过点击事件，触发methods中的increment方法，可以更改state中count的值，一旦count值发生变化，computed中的函数能够把getCount更新到视图。

<div id="app">
        <button @click="increment"></button>
        {
  {getcount}}
    </app>
    new Vue({
        el: "#app",
        // state
        data () {
         return {
            count: 0
         }
        },
         // view
        computed: {
            getCount(){
                return this.count
            }
        },
        // actions