前端面试题 Vuex 的基础和应用方法

目录

一，Vuex 是什么？有什么用

二，Vuex 的特点

三，Vuex 中的数据及函数该如何定义

1.基础数据 state

2.同步函数 mutations

3.异步函数 action

4.计算函数 getters

四，组件访问 Vuex 各项数据函数的方法

1. state 的调用

2. mutations 的调用

3. actions 的调用

4. getters 的调用

// 分模块   调用方法

---

一，Vuex 是什么？有什么用

        Vuex是一个辅助于 Vue 的状态数据管理库，用于处理Vue开发过程中的重复数据过于冗余无意义从而拖累代码运行效率的一种方案，可以将在同一个入口文件管理下的所有重复的数据、计算、函数定义到一个  store.js(叫什么名字都可以的哈) 的文件中，并且所有受到同一个入口文件管理的组件文件都可以直接访问到其中定义的

数据。

二，Vuex 的特点

        Vuex 的一个最大特点就是他是一个公共的响应式数据 , 就是说当其中的数据改变时,那么调用此数据的组件也会随之进行更新操作

        例如：token属性是我已经在不同文件中获取的同一个Vuex 属性

        那么我在 A.vue 文件中 console.log(token) 与在  B.vue 中的 console.log(token) 打印出来的是同一个值，并且如果在其他文件中对直接 token 进行数据修改，其他的文件会同时进行更新token的数据

        比如在 C.vue 中让token的值改为了 "我不是token,是个人" ，那么在 A.vue 和 B.vue 文件中打印出来的token都会是 ： "我不是token,是个人"

三，Vuex 中的数据及函数该如何定义

        Vuex主要分为四部分，分别是：基础数据 state, 同步函数 mutations，异步函数 actions，计算属性 getters。

1.基础数据 state

        类似于data中定义的数据，字符串、数字、函数、对象等等数据都在这里定义，用来储存公共共享的数据源,此处定义的数据仅可以被 mutations 更改

        (1) 数据互通

        第一种定义方法可以在一个组件改变Vuex中定义的数据源时,那么其他复用过的同一个数据的组件也会同时进行改变更新 ,这是因为组件复用的时候是 以对象的形式进行声明, 引用类型数据会在堆区开拓空间,并在栈区存入一个堆区的地址,所以在改变数据的时候 会直接通过栈区地址找到堆区数据进行更改 其他组件进行获取数据时就会通过栈区地址获取同一个数据

        因此就可以使一个数据成为一个所有组件都可以访问复用的公共数据源,但因为复杂数据类型的特点,只开辟了一片空间,大大节省了性能和内存

  第一种注册方式如下:

        // 注册vuex  公共资源
        const store = new Vuex.Store({
            // state:   储存共享的数据源,仅可以被 mutations 更改
            state: {
                text: '我想做个好人'，