Vue入门学习笔记02-Vuex

1.前言

现在工作 几乎都是以Vue框架进行开发,使用方面到都OK，但是每次被问一些细节 就总也说不到点上
所以想着 趁着现在工作不忙还有空闲时间 在重新学一下,并且希望借着这次学习 更多的了解，写的不好的地方，也请大家多批评

2.核心概念

• state: 状态,数据
• mutations： 更改状态的函数
• actions：异步操作函数
• store: 包含以上概念的函数

3.简易版本 – 代码实现

3.1 任务分析

• 实现插件
• 实现Store类
  • 维持一个响应式的 state
  • 实现 commit()
  • 实现 dispatch()
  • getters

3.2实现

因为在项目当中使用 this.$store.xxxx()

所以我们现在需要将 $store 挂载到 Vue的原型上去,这样我们所有的组件才能正常的使用$store 干活

但是我们现在发现了在new Vue 执行之前先执行的是 Vue.use()
所以首先 Vue实例就不存在 更别提Vue实例上挂的router实例了
我们可以使用Vue的全局混入 Vue.mixin() 将 router 实例挂载过程延迟到Vue实例构建之后来执行

3.2.1 state – 进行响应化处理

这里一开始为啥用 $$state也纳闷 后来查了一下
Vue初始化的时候 会对data 不光进行响应式处理， 还会在做一步代理 ,data中的响应式数据会被直接挂在到Vue实例上
我不想对外暴露的太多，用户甚至可以直接访问这个实例并且进行进一步的修改
前面加上两个$$ 就不会被代理

3.2.2 commit – 提供可以预测的变更方法

我们在项目中正常使用的时候 -> commit(‘类型’,参数)

3.2.3 dispatch – 复杂业务和异步操作需要

我们在项目中正常使用的时候 -> dispatch(‘类型’,参数) -> action方法中第一个参数 可以解构处 state,commit …

会发现

如果按照 commit的写法来写 在使用的时候 this的指向会出现问题
所以我们只需要在 constructor 中 将 commit 和 dispatch 绑定好他们俩的上下文即可

这下简易版本的Vuex算是初步堆出来了

3.2.3 getters 实现

4.后记

以上就是Vue学习的开始,希望接下来的 会对你有所帮助， 也请大家多多提出批评