脚本宝典收集整理的这篇文章主要介绍了我的 Vue.js 学习日记 （十四） - vuex 简介与超简单Demo，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

上节回顾

上一节我梳理啦一下关于对vue-router的一个已有理解，简单回顾一下...路由需要配置路由记录...守卫...meta...addRoutes...懒加载

那么今天来记录一下vuex的学习记录

1.vuex - 干啥的？

官方的解释肯定是最好的：状态管理模式

我就来耍宝的~

vuex：一个全局的公共数据对象（单例），我们可以在它里面写一些data让所有组件都可以读写

我感觉这样解释哪怕我自己忘干净啦，也可以一眼看出来他什么时候该用，所以说细节理解还是要系统的参考官方说明哦

2.vuex - 安装与目录

2.1 安装

npm install vuex --save

2.2 目录

注：目录并不是通过安装得来的

把目录放在这里只是觉得便于后面理解，不然突然看到那些概念有些茫然

以下基本都是引用自官方文档：

├── index.html
├── main.js
├── api
│   └── ... # 抽取出API请求
├── components
│   ├── App.vue
│   └── ...
└── store                 # vuex目录
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    └── modules           # 模块
        ├── cart.js       # 购物车模块
        └── products.js   # 产品模块

3.核心概述

3.x 请一定要看这句话

声明：核心单词后的中文描述完全是SeaConch胡编瞎造的，只是单纯的想要帮助理解，请不要信以为真，如果造成意想不到的后果，真的是万分抱歉

3.1 State 状态树

简单点理解的话，State有点像组件中的data的样子，作用与声明方式都像

3.2 Getter 访问器

作用有点像计算属性的样子

3.3 Mutation 状态变更器

Mutation内部注册很多可供提交的“同步状态变更器”，提交状态变更器后改变状态树

3.4 Action 动作集

Action中会注册一系列异步提交Mutation的方法

3.5 Module 模块化

当我们的Store中初始化啦很多很多的状态时，自然而然就会觉得很难受，比如user的状态与project的状态能不能分开来管理？就像.vue文件的组件化管理那样

所以说这时候就应该Module出场啦

4.单个文件内vuex的Demo

这里的单个文件内指的是store、Getter、Mutation、Action都写在同一个.js文件中

话说最近也在学习怎么使用GitHub，SeaConch自认为算不上聪明人，所以说还是经历啦一些波折才成功屡清楚怎么上传本地已存在的项目...而已! w(ﾟДﾟ)w

SeaConch成功的放在GitHub上vuex的demo！！！

脚本宝典总结

以上是脚本宝典为你收集整理的我的 Vue.js 学习日记 （十四） - vuex 简介与超简单Demo全部内容，希望文章能够帮你解决我的 Vue.js 学习日记 （十四） - vuex 简介与超简单Demo所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。