vuex常见面试题

1.vuex是什么？怎么使用？哪种功能场景使用它？

vue框架中状态管理。在main.js引入store，注入。新建一个目录store，…… export 。场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

main.js:

import store from './store'


new Vue({
   
el:'#app',
store
})

2.vuex有哪几种属性

State、Getter、Mutation 、Action、Module 五种

总结

state => 基本数据
getters => 从基本数据派生的数据
mutations => 提交更改数据的方法，同步！
actions => 像一个装饰器，包裹mutations，使之可以异步。
modules => 模块化Vuex

vuex的State特性是？
stae就是存放数据的地方，类似一个仓库 , 特性就是当mutation修改了state的数据的时候，他会动态的去修改所有的调用这个变量的所有组件里面的值（ 若是store中的数据发生改变，依赖这个数据的组件也会发生更新 ）

vuex的Getter特性是？
getter用来获取数据，mapgetter经常在计算属性中被使用

vuex的Mutation特性是？
Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。

Action 可以包含任意异步操作

3.不使用Vuex会带来什么问题

可维护性会下降，想修改数据要维护三个地方；

可读性会下降，因为一个组件里的数据，根本就看不出来是从哪来的；

增加耦合，大量的上传派发，会让耦合性大大增加，本来Vue用Component就是为了减少耦合，现在这么用，和组件化的初衷相背。

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

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

5.vuex一个例子方法

1.首先定义两个页面

两个页面有一个公共的名字（大前端）

当第一个页面点击对应的按钮时 两个页面的公共名字会变成（vue）
当第二个页面点击对应的按钮时 两个页面的公共名字会变成（I love you）

2.开始使用vuex，新建一个 sotre文件夹，分开维护 actions mutations getters

3.在store/index.js文件中新建vuex 的store实例

*as的意思是 导入这个文件里面的所有内容，就不用一个个实例来导入了。

import Vue from 'vue'
import Vuex from 'vuex'
import * as getters from './getters' // 导入响应的模块，*相当于引入了这个组件下所有导出的事例
import * as actions from './actions'
import * as mutations from './mutations'
 
Vue.use(Vuex)
// 首先声明一个需要全局维护的状态 state,比如 我这里举例的resturantName
const state = {
   
    resturantName: '大前端' // 默认值
    // id: xxx  如果还有全局状态也可以在这里添加
    // name:xxx
}
 
// 注册上面引入的各大模块
export  default  new Vuex.Store({
   
    state,    // 共同维护的一个状态，state里面可以是很多个全局状态
    getters,  // 获取数据并渲染
    actions,  // 数据的异步操作
    mutations  // 处理数据的唯一途径，state的改变或赋值只能在这里
})

4.actions

// 给action注册事件处理函数。当这个函数被触发时候，将状态提交到mutations中处理
export function modifyAName({
   commit}, name) {
    // commit 提交；name即为点击后传递过来的参数，此时是 'vue'
    return commit ('modifyAName', name)
}
export function modifyBName({
   commit}, name) {
   
    return commit ('modifyBName', name)
}
 
// ES6精简写法
// export const modifyAName = ({commit},name) => commit('modifyAName', name)

5.mutations

// 提交 mutations是更改Vuex状态的唯一合法方法
export const modifyAName = (state, name) => {
    // A组件点击更改名称为 vue
    state.resturantName = name // 把方法传递过来的参数，赋值给state中的resturantName
}
export const modifyBName = (state, name) => {
    // B组件点击更改名称为I love you
    state.resturantName = name
}

6.getters

// 获取最终的状态信息export const resturantName = state =>