2024年最新VueX详解及如何实现持久化_vue vuex 实现持久化 dispatch(1)，2024年最新字节前端高工面试

最新推荐文章于 2024-10-16 11:23:07 发布

2401_84437530

最新推荐文章于 2024-10-16 11:23:07 发布

阅读量379

点赞数 3

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84437530/article/details/138879520

版权

程序员专栏收录该内容

167 篇文章 0 订阅

订阅专栏

css

1，盒模型
2，如何实现一个最大的正方形
3，一行水平居中，多行居左
4，水平垂直居中
5，两栏布局，左边固定，右边自适应，左右不重叠
6，如何实现左右等高布局
7，画三角形
8，link @import导入css
9，BFC理解

js

1，判断 js 类型的方式
2，ES5 和 ES6 分别几种方式声明变量
3，闭包的概念？优缺点？
4，浅拷贝和深拷贝
5，数组去重的方法
6，DOM 事件有哪些阶段？谈谈对事件代理的理解
7，js 执行机制、事件循环
8，介绍下 promise.all
9，async 和 await,
10，ES6 的 class 和构造函数的区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  .forEach(sub => sub(mutation, this.state))

if (
  __DEV__ &&
  options && options.silent
) {
  console.warn(
    `[vuex] mutation type: ${type}. Silent option has been removed. ` +
    'Use the filter functionality in the vue-devtools'
  )
}

}


## Action：


涉及改变数据的，使用mutations 存在业务逻辑的 就用actions  
 action 的提交类似于mutation，但是不同点在于 action不是直接改变状态，而提交的是mutation。 且action 可以包含任意异步操作。


action 函数接受一个 与store 实例具有相同方法和属性的 context 对象


Action 通过 store.dispatch 方法触发：


* 标准写法：

actions: {
increment (context) {
context.commit(‘increment’)
}
}


* 常态写法：  
 用到参数解构 来简化代码

actions: {
increment ({ commit }) {
commit(‘increment’)
}
}


##### dispatch 源码：

dispatch (_type, _payload) {
// check object-style dispatch
const {
type,
payload
} = unifyObjectStyle(_type, _payload)

const action = { type, payload }
const entry = this._actions[type]
if (!entry) {
  if (__DEV__) {
    console.error(`[vuex] unknown action type: ${type}`)
  }
  return
}

try {
  this._actionSubscribers
    .slice() // shallow copy to prevent iterator invalidation if subscriber synchronously calls unsubscribe
    .filter(sub => sub.before)
    .forEach(sub => sub.before(action, this.state))
} catch (e) {
  if (__DEV__) {
    console.warn(`[vuex] error in before action subscribers: `)
    console.error(e)
  }
}

const result = entry.length > 1
  ? Promise.all(entry.map(handler => handler(payload)))
  : entry[0](payload)

return new Promise((resolve, reject) => {
  result.then(res => {
    try {
      this._actionSubscribers
        .filter(sub => sub.after)
        .forEach(sub => sub.after(action, this.state))
    } catch (e) {
      if (__DEV__) {
        console.warn(`[vuex] error in after action subscribers: `)
        console.error(e)
      }
    }
    resolve(res)
  }, error => {
    try {
      this._actionSubscribers
        .filter(sub => sub.error)
        .forEach(sub => sub.error(action, this.state, error))
    } catch (e) {
      if (__DEV__) {
        console.warn(`[vuex] error in error action subscribers: `)
        console.error(e)
      }
    }
    reject(error)
  })
})

}