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 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/blankOne/p/11384342.html