资源来自:https://developer.aliyun.com/ask/289308?spm=a2c6h.13066354.0.0.767533b5ZcyIwH
你有写过vuex中store的插件吗?
Vuex 的 store 接受 plugins 选项,这个选项暴露出每次 mutation 的钩子。Vuex 插件就是一个函数,它接收 store 作为唯一参数:
const myPlugin = store => {
// 当 store 初始化后调用
store.subscribe((mutation, state) => {
// 每次 mutation 之后调用
// mutation 的格式为 { type, payload }
});
};
然后像这样使用:
const store = new Vuex.Store({
// ...
plugins: [myPlugin]
});
https://vuex.vuejs.org/zh/guide/plugins.html
你有使用过vuex的module吗?主要是在什么场景下使用?
当有多个不同模块的数据需要共享,就需要使用module分成成多个小模块使用
按模块分成多个module,状态树延伸多个分支,模块的状态内聚,主枝干放全局共享状态
vuex使用actions时不支持多参数传递怎么办?
以载荷或对象形式(Object)
你觉得vuex有什么缺点?
工具都是用来提高工作效率的,如果不能,那就说明工具用的不对。如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。比如就几个状态的话 不用比较好
你觉得要是不用vuex的话会带来哪些问题?
1.传参数时对于多层嵌套的组件将会非常繁琐,对于兄弟组件更是无法传递
2.当不同视图的行为需要去修改数据时,无法追踪到数据的变更方向,导致无法维护代码
vuex怎么知道state是通过mutation修改还是外部直接修改的?
通过$watch
监听mutation的commit函数中**_committing**是否为true
请求数据是写在组件的methods中还是在vuex的action中?
根据业务场景划分,如果该请求数据的方法是多个视图共享的话,则写在action中,如果是当前视图所用,则写在组件的methods中
怎么监听vuex数据的变化?
官网的图显示 Devtools好像是监视mutation的调用 mark一下
//利用计算属性
computed: {
nowData() {
return this.$store.state.nowData;
}
},
//监听执行
watch: {
nowData(val) {
// doSomeThing
}
},
vuex的action和mutation的特性是什么?有什么区别?
Action
一些对 State 的异步操作可放在 Action 中,并通过在 Action 中 commit Mutation 变更状态
Action 可通过 store.dispatch() 方法触发,或者通过 mapActions 辅助函数将 vue 组件的 methods 映射成 store.dispatch() 调用
Mutation
在 vuex 的严格模式下,Mutaion 是 vuex 中改变 State 的唯一途径
Mutation 中只能是同步操作
通过 store.commit() 调用 Mutation
页面刷新后vuex的state数据丢失怎么解决?
首先要搞清楚为什么state数据会丢失。
通常情况state里的初始数据是空,通过mutation或者action的方法获取实际数据后存放在state中。这些方法往往是在某个组件(组件A)的生命周期或者事件中调用。
如果在刷新页面的时候这些方法没有被调用(例如此时页面中没有组件A,或组件A的对应事件没有被触发),那么就没有获取实际数据,state的数据就是初始的空。
对症下药,就是要确保刷新页面以后调用对应的获取数据方法。
最万金油的解决是在App.vue的mounted生命周期中去调用这些方法。不管在哪个路由下刷新页面,总会执行。
vuex的state、getter、mutation、action、module特性分别
state, 状态初始化, 并实施观察
getter, 获取数据用于view或data中使用
mutation: 内部处理state变化
action: 处理外部交互
module: 模块化以上四个
const moduleA = {
state: () => ({ ... }),
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: () => ({ ... }),
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
vuex的store有几个属性值?分别讲讲它们的作用是什么?
state:存贮公共数据的地方
Getters:获取公共数据的地方
mutations:放的是同步的操作和reducer有点像 通过store的commit方法来让mutations执行
action:放的是异步的操作 通过dispatch的方法让action里面的方法执行
context是store的一个副本
Vuex就是提供一个仓库,store仓库里面放了很多对象其中state即使数据源存放地,
你理解的vuex是什么呢?哪些场景会用到?不用会有问题吗?有哪些特性?
长期维护的项目,因为长期维护的项目不能保证3层组件设计。肯定会有第4层,依次类推项目越来越难维护。
从4层调第一层的方法太困难,中间有夹杂着其他的逻辑耦合。所有这个是我用vuex的目的,抽离公共的东西,到vuex方便维护
使用vuex的优势是什么?
便于进行全局或者局部的状态管理. 便于组件/插件/混合之间的联系
vue是单向数据流,有一个vuex来建一个”全局仓库“,可以减少很多开发时候的”传参地狱“