Vuex 入门级神作

矫情吗；* 2023-06-03 04:54 12阅读 0赞

[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 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

![1483896-20190820162026977-6979044.png][]

然后在 store的目录下 创建一个 store.js 用来接受之后各个应用的返回的东西~ ?

![1483896-20190820163016137-463139593.png][]

然后把 这个 store 注册到 main.js 中 成为 vue的属性

![1483896-20190820170023532-1078401195.png][]

弄好了之后呢， 先别急 我们要把每个应用分别放在不同的文件夹中，所以就创建了四个应用，然后分别创建他们相对应的js文件（module放在最后再讲哦，先别急）

创建好了就是这个样子啦；

![1483896-20190820163749621-615420468.png][]

那创建好了之后我们就开始 第一个吧~   
因为要是想看展示状态的话，用动态的方法最好了吧， 那就自己创建一个 vue的组件用来 学习这个东西吧！

在创建好了之后我们要实现一个东西就是：点击按钮让 count的数字 加1；

![1483896-20190820201521321-551246428.png][]

State 的 简介是： Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照

这样就能简单实现了； 但是我们想到却不是这样的，我们要使用的是State 来看看这种效果，那就开始吧！

在 State的目录下 找到state.js

![1483896-20190820164806615-1602214288.png][]

简单的声明一个 变量； 然后暴露出去；在 store.js 里面接收一下~ 因为 store是仓库嘛，所以你的东西都得告诉仓库哦

![1483896-20190820165036694-355989329.png][]

这样他就收到了 count的这个变量；

所以我们在 组件的模板中 就应该改变一些东西啦~

![1483896-20190820165359632-1304385412.png][]

注意看 发生的变化

![1483896-20190820165711186-982471376.png][]

因为 我们把store 注册到了 vue的实例上，变成了属性，所以我们 console.log( vm ) 就能看到多了一个属性叫 store

![1483896-20190820170225259-125013972.png][]

就是上面这个样子了

所以我们刚才的那样的写法就是没问题的；应该明白了叭~

这个就是State的写法哦

然后就是 第二个应用写法 Getter 官方给的说法是 store中的 getter （可以认为是store的计算属性），就像计算属性一样，getter的返回值回根据他的依赖被缓存起来，且只有当的依赖值发生了改变才会被重新计算；

getter 可以 接受 state 作为其第一个参数； （我用图来解释叭）

在 getter的js中 返回一个函数叫 doublecount 的方法；

![1483896-20190820191019782-1391989039.png][]

在 getters的js中 传入了 state （ 因为 getters的第一个参数就是 state 所以这里能用到他有关的所有数据）

然后 返回了 state 中定义的 const；

![1483896-20190820191153560-2090719271.png][]

在 vue的组件的模板中， 在方法里 让 state中的const ++ ； 但是上面显示的是 getters的应用格式；

Getter 也可以接受其他 getter 作为第二个参数； 具体的用法我就不写啦，毕竟只是一个初级入门~

现在该第三个啦； 叫 Mutation啦

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation

Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数

上图来解释叭~

![1483896-20190820191627483-287607313.png][]

这里 用了，mutation 的 第一个参数（state 这个东西也是必填项），跟 第二个参数是 payload ，这里的payload 是一个对象；

一定要记得每次用了新的应用都要在 store.js 中记得挂载上哦；

![1483896-20190820192448917-626023178.png][]

每个mutation都得用commit 来进行操作

你可以向 `store.commit` 传入额外的参数，即 mutation 的 载荷（payload）

![1483896-20190820192534650-1928472059.png][]

payload.n 的意思是： 因为payload是一个对象，所以要用 Object.attribute的时候就这么写啦~

所以 这里的东西 执行后的就是； 每次让 const + 5；

这里其实还能用另一种的方式来写：有一个是传参的方式，那另一种就是 对象的方式来进行传值；

![1483896-20190820193017140-1999013682.png][]

就是这样子的写法啦~

下面就该第四种啦~ 叫做 Action ~

Action 类似于 mutation，不同在于：

*  Action 提交的是 mutation，而不是直接变更状态。
 *  Action 可以包含任意异步操作。

所谓的意思就是：mutation 里面传的是不直接变更状态；action 可以包含任意的异步操作；

这里写一个简单的例子~

让 在 三秒后 让const的数字加上3；

记得每次用新的时候 都要 在 store.js 里面进行挂载；

![1483896-20190820195332502-1423454754.png][]

然后在 vue的组件模板中 写入

![1483896-20190820195430520-1168388785.png][]

这里要注意一下~ Action 用的 store.dispatch 来进行 方法触发的；

这么写完的话过了三秒，他就会 自动的 加上3 咯~

最后的一个应用是 Module啦

官方给出的解释 是这样的： ? ↓

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

但是用的话，这里举个简单的例子叭；

![1483896-20190820200430350-1645040466.png][]

要是这样写的话，前面的就得换一种写法了~ 我直接就上图了嗷

![1483896-20190820200708893-822526699.png][]

这里的意思是： 如果你要调用应用里面的变量的时候前都得多加一个叫 a 的对象哦；

因为 我们把都封存到了 modules 中 ，他们每个都是一个对象； 所以 写法都得变一下~

那入门的介绍 也就介绍完了~ 喜欢的点个关注，评论个 666； 也不枉我写的好几个小时呀； 谢谢啦~

posted on 2019-08-20 20:23 [blankOne][] 阅读( ...) 评论( ...) [ 编辑][Link 1] 收藏

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

[Vuex _]: https://www.cnblogs.com/blankOne/p/11384342.html
[devtools extension]: https://github.com/vuejs/vue-devtools
[1483896-20190820162026977-6979044.png]: /images/20230601/c42e40399425479a9111e5e7df564bd3.png
[1483896-20190820163016137-463139593.png]: /images/20230601/5c887dbaa3b1433ea898c2f1bb01260a.png
[1483896-20190820170023532-1078401195.png]: /images/20230601/dbb444f636824af0a64c31039f507a79.png
[1483896-20190820163749621-615420468.png]: /images/20230601/be4d07185bbb47ef8bc862287e751f0f.png
[1483896-20190820201521321-551246428.png]: /images/20230601/66d5dc34d67a4b4183bec9993fb0b254.png
[1483896-20190820164806615-1602214288.png]: /images/20230601/c7bbe1173a4f40269b971a92118bc1f5.png
[1483896-20190820165036694-355989329.png]: /images/20230601/d58db3e7e03a4a19978e119e0d2bd6a1.png
[1483896-20190820165359632-1304385412.png]: /images/20230601/0afc94fec5654af89c84dcbb6cb7ee63.png
[1483896-20190820165711186-982471376.png]: /images/20230601/0cda0bf83ac7417389fbd5767c665924.png
[1483896-20190820170225259-125013972.png]: /images/20230601/d0400510bdbc4083a7aabd973070fc8b.png
[1483896-20190820191019782-1391989039.png]: /images/20230601/c191bd5cab8e4560ada99ceff4140318.png
[1483896-20190820191153560-2090719271.png]: /images/20230601/90429ce36a6f43578cea1fb19de2dd26.png
[1483896-20190820191627483-287607313.png]: /images/20230601/3bf56fe1c4004e70a6bf704a1fc56458.png
[1483896-20190820192448917-626023178.png]: /images/20230601/ebda5ddb89404641856f3ebdafb6e417.png
[1483896-20190820192534650-1928472059.png]: /images/20230601/a56b7563ab6a4b33a361fba9275fdab4.png
[1483896-20190820193017140-1999013682.png]: /images/20230601/78e536e7812640b2b99c211f639d2a70.png
[1483896-20190820195332502-1423454754.png]: /images/20230601/f613996a23d84479b5cb2e4665bd6c7f.png
[1483896-20190820195430520-1168388785.png]: /images/20230601/1dec6a3096cf47309be89e15fb61693d.png
[1483896-20190820200430350-1645040466.png]: /images/20230601/552c76a44426480aabb92fb6fb6f8880.png
[1483896-20190820200708893-822526699.png]: /images/20230601/929dfe8e065445a69129e3fedb2f8f5a.png
[blankOne]: https://www.cnblogs.com/blankOne/
[Link 1]: https://i.cnblogs.com/EditPosts.aspx?postid=11384342