Vuex面试题总结必看!

VueX 专栏收录该内容
1 篇文章 0 订阅

1.什么是Vuex?

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

2.什么时候用Vue?

多个组件依赖于同一状态时。

来自不同组件的行为需要变更同一状态

3.vuex有哪几种属性?

有五种,分别是 State、 Getter、Mutation 、Action、 Module

state:存放公共数据的地方;

getter:获取根据业务场景处理返回的数据;

mutations:唯一修改state的方法,修改过程是同步的;

action:异步处理,通过分发操作触发mutation;

module:将store模块分割,模块化,命名空间;
 

 4.Vuex中状态储存在哪里,怎么改变它?

 存储在state中,改变Vuex中的状态的唯一途径就是显式地提交 (commit) mutation,this.$store.commit("Fangfa","data"), Fangfa 为mutations属性中定义的方法

 5.vuex 是什么? 怎么使用?那些场景用过 ?

Vuex是为vue.js应用程序开发的状态管理模式。只要来读取的状态集中放在store中;改变状态的方 式就是提交mutations。这是个同步的实物;异步逻辑应该封装中action中。

怎么使用:在main.js引入store,注入。新建一个目录store,...export。

应用场景:单页面应用,组件之间的状态,音乐播放,登录状态,加入购物车

6. 怎么在组件中批量使用Vuex的state状态?

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

import {mapState} from 'vuex'
export default{
    computed:{
        ...mapState(['price','number'])
    }
}

 7.Vuex中action和mutation有什么区别?

1.mutation 更改 Vuex的store中的状态的唯一方法是 提交 mutation 每个mutation 都有一个 字符串的事件类型 和 一个回调函数 回调函数 就是进行状态更改的地方 且 接受 state 作为 第一个参数

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

2.Action 提交的是mutation 而不是直接变更状态 可以包含异步操作

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

8. .在组件中怎么访问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。

9. 在v-model上怎么用Vuex中state的值?

 需要通过computed计算属性来转换

<input v-model="message">
// ...
computed: {
    message: {
        get () {
            return this.$store.state.message
        },
        set (value) {
            this.$store.commit('updateMessage', value)
        }
    }

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

如果请求来的数据是不是要被其他组件公用,仅仅在请求的组件内使用,就不需要放入vuex 的state里。

如果被其他地方复用,这个很大几率上是需要的,如果需要,请将请求放入action里,方便复

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

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

 12..使用vuex的优势是什么?

 其实vuex中的所有功能都能够通过其他的方式进行实现,只不过vuex对这些方法进行了整合处理,使用起来更加便捷,同时也便于维护。

 13.vuex 的 getter 特性是什么?

1.可以对 state 进行计算操作 它就是 store 的计算属性

2.虽然在组件内也可以做计算属性 但是 getters 可以在多个组件之间复用

2.如果一个状态只在一个组件内使用 可以不用 getters

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

1.如果请求来的数据 是 不需要被其他组件公用 仅仅在请求的组件内使用 就不需要放入 vuex的 state中

2.若被其他地方复用 则将请求放入action中 方便复用

 15.如何在模块中 访问全局内容?

1.若 使用 全局 state和 getter rootState 和 rootGetter 会作为第三和第四参数传入getter 也会通过context对象的属性传入 action

2.若需要 在全局命名空间内 分发 action 或提交 mutation 将{root:true} 作为第三参数 传给 dispatch 或 commit 即可
 

  • 4
    点赞
  • 3
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值