vuex常见面试题-前端-E先生的博客

　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')

　　 }

}

　　})