vuex常见面试题-前端-E先生的博客
Java
MySQL
大数据
Python
前端
黑科技
    首页 >> 互联网 >> 前端

vuex常见面试题

[导读]:1.vuex是什么?怎么使用?哪种功能场景使用它? Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。简单来说就是:应用遇到...
 1.vuex是什么?怎么使用?哪种功能场景使用它?
  Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。简单来说就是:应用遇到多个组件共享状态时,使用vuex。
  场景:多个组件共享数据或者是跨组件传递数据时
  vuex的流程
  页面通过mapAction异步提交事件到action。action通过commit把对应参数同步提交到mutation,mutation会修改state中对应的值。最后通过getter把对应值跑出去,在页面的计算属性中,通过,mapGetter来动态获取state中的值
 
 2.vuex有哪几种属性
  有五种,分别是State,Getter,Mutation,Action,Module(就是mapAction)
  1.state:vuex的基本数据,用来存储变量
  2.geeter:从基本数据(state)派生的数据,相当于state的计算属性
  3.mutation:提交更新数据的方法,必须是同步的(如果需要异步使用action)。每个mutation都有一个字符串的事件类型(type)和一个回调函数(handler)。回调函数就是我们实际进行状态更改的地方,并且它会接受state作为第一个参数,提交载荷作为第二个参数。
  4.action:和mutation的功能大致相同,不同之处在于==》1.Action提交的是mutation,而不是直接变更状态。2.Action可以包含任意异步操作。
  5.modules:模块化vuex,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理。
 
 3.Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中?
  一、如果请求来的数据是不是要被其他组件公用,仅仅在请求的组件内使用,就不需要放入vuex的state里。
  二、如果被其他地方复用,这个很大几率上是需要的,如果需要,请将请求放入action里,方便复用,并包装成promise返回,在调用处用async await处理返回的数据。如果不要复用这个请求,那么直接写在vue文件里很方便
 4.vuex一个例子方法
  在testApp中建store文件==》store文件下又有modules文件夹和getter.js和index.js==》store文件下建user.js
  在store文件下的index.js中引入
  import Vue from'vue'
  import Vuex from'vuex'
  import user from'./modules/user'
  import global from'./modules/global'
  import getters from'./getters'
  Vue.use(Vuex)
  const store=new Vuex.Store({
  modules:{
      user
  },
    getters
  })
  export default store
  在store文件下的getters.js中引入
  const getters={
    self:state=>state.user.self,
    token:state=>state.user.token,
    currentCommunity:(state,getters)=>{
      let cid=getters.currentCommunityId
      return getters.communities.filter(item=>{
          return item.communityId===cid
    })
   }
  }
  export default getters
  在modules文件下的user.js写代码
  const user={
    state:{
      self:null,
      token:'',
    },
    mutations:{
      SET_SELF:(state,self)=>{
      state.self=self
    },
    SET_TOKEN:(state,token)=>{
    state.token=token
    }
  },
  actions:{
      login({commit},res){
    commit('SET_SELF',res.self)
    commit('SET_TOKEN',res.token)
    }
   }
  }
  export default user
  使用下面这两种方法存储数据:
  dispatch:异步操作,写法:this.$store.dispatch('actions方法名',值)
  commit:同步操作,写法:this.$store.commit('mutations方法名',值)
 
  5.Vuex中如何异步修改状态
  actions与mutations作用类似,都是可以对状态进行修改。不同的是actions是异步操作的。
  actions是可以调用Mutations里的方法的。
  const actions={
    addActions(context){
      context.commit('add',10);//调用mutations中的方法
      setTimeout(()=>{context.commit('reduce')},5000)
      //setTimeOut(()=>{context.commit('reduce')},3000);
      console.log('我比reduce提前执行');
    },
    reduceActions({commit}){
      commit('reduce');
    }
  }
  6.Vuex中actions和mutations的区别
  Mutation更改Vuex的store中的状态的唯一方法是提交mutation。Vuex中的mutation非常类似于事件:每个mutation都有一个字符串的事件类型(type)和一个回调函数(handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受state作为第一个参数
  const store=new Vuex.Store({
      state:{
        count:1
      },
      mutations:{
        increment(state){
        //变更状态
       state.count++
      }
    }
  })
  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')
      }
         }
  })

本文来自E先生的博客,如若转载,请注明出处:https://www.javajz.cn

留言区

联系人:
手   机:
内   容:
验证码:

历史留言

欢迎加Easy的QQ