我的 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！！！