vuex基础面试题

什么是 Vuex?

Vuex 是一个专为 Vue.js 应用程序开发的状态管理插件.它采用集中式存储管理应用的所有组件的状态,而更改状态的唯一方法是提交 mutation.例 ,

this.$store.commit('SET_VIDEO_PAUSE', video_pause);

SET_VIDEO_PAUSE 为 mutations 属性中定义的方法,video_pause 为传递的参数

Vuex 解决了什么问题?

解决两个问题

1. 多个组件依赖于同一状态时,对于多层嵌套的组件的传参将会非常繁琐,并且对于兄弟组件间的状态传递无能为力
2. 来自不同组件的行为需要变更同一状态,以往采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝.以上的这些模式非常脆弱,通常会导致无法维护的代码

什么时候用 Vuex?怎么引用 Vuex?

当项目遇到以下两种场景时

1. 多个组件依赖于同一状态时
2. 来自不同组件的行为需要变更同一状态
3. 先安装依赖 nnpm install vuex --save
4. 在项目目录 src 中建立 store 文件夹
5. 在 store 文件夹下新建 index.js 文件,写入

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
//不是在生产环境debug为true
const debug = process.env.NODE_ENV !== 'production';
//创建Vuex实例对象
const store = new Vuex.Store({
  strict: debug, //在不是生产环境下都开启严格模式
  state: {},
  getters: {},
  mutations: {},
  actions: {},
});
export default store;

6. 然后再 main.js 文件中引入 Vuex,这么写

import Vue from 'vue';
import App from './App.vue';
import store from './store';
const vm = new Vue({
  store: store,
  render: (h) => h(App),
}).$mount('#app');

vuex 工作原理详解

vuex 整体思想诞生于 flux, 可其的实现方式完完全全的使用了 vue 自身的响应式设计,依赖监听、依赖收集都属于 vue 对对象 Property set get 方法的代理劫持.最后一句话结束 vuex 工作原理,vuex 中的 store 本质就是没有 template 的隐藏着的 vue 组件;

解析：vuex 的原理其实非常简单,它为什么能实现所有的组件共享同一份数据?
因为 vuex 生成了一个 store 实例,并且把这个实例挂在了所有的组件上,所有的组件引用的都是同一个 store 实例
store 实例上有数据,有方法,方法改变的都是 store 实例上的数据.由于其他组件引用的是同样的实例,所以一个组件改变了 store 上的数据,导致另一个组件上的数据也会改变,就像是一个对象的引用.

vuex 有哪几种属性?

有五种,分别是 State、 Getter、Mutation 、Action、 Mutation
(1)vuex 的 State 特性
A、Vuex 就是一个仓库,仓库里面放了很多对象.其中 state 就是数据源存放地,对应于一般 Vue 对象里面的 data
B、state 里面存放的数据是响应式的,Vue 组件从 store 中读取数据,若是 store 中的数据发生改变,依赖这个数据的组件也会发生更新
C、它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性中

(2)vuex 的 Getter 特性
A、getters 可以对 State 进行计算操作,它就是 Store 的计算属性
B、虽然在组件内也可以做计算属性,但是 getters 可以在多组件之间复用
C、如果一个状态只在一个组件内使用,是可以不用 getters

(3)vuex 的 Mutation 特性
Action 类似于 mutation,不同在于：Action 提交的是 mutation,而不是直接变更状态;Action 可以包含任意异步操作.

不用 Vuex 会带来什么问题?

可维护性会下降,想修改数据要维护三个地方;
可读性会下降,因为一个组件里的数据,根本就看不出来是从哪来的;
增加耦合,大量的上传派发,会让耦合性大大增加,本来 Vue 用 Component 就是为了减少耦合,现在这么用,和组件化的初衷相背.

页面中使用

使用 mapGetters 辅助函数, 利用对象展开运算符将 getter 混入 computed 对象中

import {
    mapState,
    mapMutations
} from 'vuex'
computed: {
    // 获取state中的数据
    ...mapState([
        'latitude', 'longitude', 'cartList'
    ])
    // 获取getter中的数据
    ...mapGetters(['total', 'discountTotal'])
}
// 使用vuex里面的action方法
methods: {
    ...mapMutations([
        'RECORD_ADDRESS', 'ADD_CART', 'REDUCE_CART', 'INIT_BUYCART', 'CLEAR_CART', 'RECORD_SHOPDETAIL'
    ]),
}

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
    }
}

怎么通过 getter 来实现在组件内可以通过特定条件来获取 state 的状态?

通过让 getter 返回一个函数,来实现给 getter 传参.然后通过参数来进行判断从而获取 state 中满足要求的状态.

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)这样来访问这些派生转态.

computed: {
    getTodoById() {
        return this.$store.getters.getTodoById
    },
}
mounted() {
    console.log(this.getTodoById(2).done) //false
}

vuex 中 actions 和 mutations 有什么区别?

mutations 可以直接修改 state,但只能包含同步操作,同时,只能通过提交 commit 调用(尽量通过 Action 或 mapMutation 调用而非直接在组件中通过

this.$store.commit();

提交 actions 是用来触发 mutations 的,它无法直接改变 state,它可以包含异步操作,它只能通过 store.dispatch 触发

页面刷新后 vuex 的 state 数据丢失怎么解决?

个人做法是在组件的生命周期 created()里调用 actions 里的获取收据方法 fetchData(), 然后 fetchData()里面判断 state 里面有没数据,有的话 return,没有的话就请求接口获取数据,这样每次刷新页面或者重新进入页面既能保证 state 里有需要的数据,又能不调用多余的请求

Vue.js 中 ajax 请求代码应该写在组件的 methods 中还是 vuex 的 actions 中?

一、如果请求来的数据是不是要被其他组件公用,仅仅在请求的组件内使用,就不需要放入 vuex 的 state 里.
二、如果被其他地方复用,这个很大几率上是需要的,如果需要,请将请求放入 action 里,方便复用,并包装成 promise 返回,在调用处用 async await 处理返回的数据.如果不要复用这个请求,那么直接写在 vue 文件里很方便.

页面刷新后 vuex 的 state 数据丢失怎么解决?

localStorage 或者就是 sessionStorage ,或者借用辅助插 vuex-persistedstate

在模块中,getter 和 mutation 和 action 中怎么访问全局的 state 和 getter?

1. 在 getter 中可以通过第三个参数 rootState 访问到全局的 state,可以通过第四个参数 rootGetters 访问到全局的 getter.
2. 在 mutation 中不可以访问全局的 satat 和 getter,只能访问到局部的 state.
3. 在 action 中第一个参数 context 中的 context.rootState 访问到全局的 state,context.rootGetters 访问到全局的 getter.