Vuex 入门级 神作
Vuex 入门级 神作
Vuex 是什么？？？？
如果用官方的话说，是以下这段：
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
但是当我真的入门 Vuex的时候他主要难的地方是 在5个应用中不断的使用；
五个应用分别为：State，Getter，Mutation，Action，Module 这五个应用~
接下来我就带大家来一起写一次简单的使用方法；
首先就是得下载 Vuex； npm i vuex -S
其次我们要在 vue-cli中创建好自己的项目目录 ?
然后跟我一样 在 src 中创建 一个主?目录（容器） 起名叫 store；因为每个 Vuex 应用的核心就是 store（仓库的意思）；
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
然后在 store的目录下 创建一个 store.js 用来接受之后各个应用的返回的东西~ ?
然后把 这个 store 注册到 main.js 中 成为 vue的属性
弄好了之后呢， 先别急 我们要把每个应用分别放在不同的文件夹中，所以就创建了四个应用，然后分别创建他们相对应的js文件（module放在最后再讲哦，先别急）
创建好了就是这个样子啦；
那创建好了之后我们就开始 第一个吧~
因为要是想看展示状态的话，用动态的方法最好了吧， 那就自己创建一个 vue的组件用来 学习这个东西吧！
在创建好了之后我们要实现一个东西就是：点击按钮让 count的数字 加1；
State 的 简介是： Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照
这样就能简单实现了； 但是我们想到却不是这样的，我们要使用的是State 来看看这种效果，那就开始吧！
在 State的目录下 找到state.js
简单的声明一个 变量； 然后暴露出去；在 store.js 里面接收一下~ 因为 store是仓库嘛，所以你的东西都得告诉仓库哦
这样他就收到了 count的这个变量；
所以我们在 组件的模板中 就应该改变一些东西啦~
注意看 发生的变化
因为 我们把store 注册到了 vue的实例上，变成了属性，所以我们 console.log( vm ) 就能看到多了一个属性叫 store
就是上面这个样子了
所以我们刚才的那样的写法就是没问题的；应该明白了叭~
这个就是State的写法哦
然后就是 第二个应用写法 Getter 官方给的说法是 store中的 getter （可以认为是store的计算属性），就像计算属性一样，getter的返回值回根据他的依赖被缓存起来，且只有当的依赖值发生了改变才会被重新计算；
getter 可以 接受 state 作为其第一个参数； （我用图来解释叭）
在 getter的js中 返回一个函数叫 doublecount 的方法；
在 getters的js中 传入了 state （ 因为 getters的第一个参数就是 state 所以这里能用到他有关的所有数据）
然后 返回了 state 中定义的 const；
在 vue的组件的模板中， 在方法里 让 state中的const ++ ； 但是上面显示的是 getters的应用格式；
Getter 也可以接受其他 getter 作为第二个参数； 具体的用法我就不写啦，毕竟只是一个初级入门~
现在该第三个啦； 叫 Mutation啦
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数
上图来解释叭~
这里 用了，mutation 的 第一个参数（state 这个东西也是必填项），跟 第二个参数是 payload ，这里的payload 是一个对象；
一定要记得每次用了新的应用都要在 store.js 中记得挂载上哦；
每个mutation都得用commit 来进行操作
你可以向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）
payload.n 的意思是： 因为payload是一个对象，所以要用 Object.attribute的时候就这么写啦~
所以 这里的东西 执行后的就是； 每次让 const + 5；
这里其实还能用另一种的方式来写：有一个是传参的方式，那另一种就是 对象的方式来进行传值；
就是这样子的写法啦~
下面就该第四种啦~ 叫做 Action ~
Action 类似于 mutation，不同在于：
- Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
所谓的意思就是：mutation 里面传的是不直接变更状态；action 可以包含任意的异步操作；
这里写一个简单的例子~
让 在 三秒后 让const的数字加上3；
记得每次用新的时候 都要 在 store.js 里面进行挂载；
然后在 vue的组件模板中 写入
这里要注意一下~ Action 用的 store.dispatch 来进行 方法触发的；
这么写完的话过了三秒，他就会 自动的 加上3 咯~
最后的一个应用是 Module啦
官方给出的解释 是这样的： ? ↓
由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：
但是用的话，这里举个简单的例子叭；
要是这样写的话，前面的就得换一种写法了~ 我直接就上图了嗷
这里的意思是： 如果你要调用应用里面的变量的时候前都得多加一个叫 a 的对象哦；
因为 我们把都封存到了 modules 中 ，他们每个都是一个对象； 所以 写法都得变一下~
那入门的介绍 也就介绍完了~ 喜欢的点个关注，评论个 666； 也不枉我写的好几个小时呀； 谢谢啦~
posted on 2019-08-20 20:23 blankOne 阅读( …) 评论( …) 编辑 收藏
转载于
//www.cnblogs.com/blankOne/p/11384342.html
电玩女神
朱雀
野性酷女
还没有评论，来说两句吧...