gitLab中集成Vue框架的相关学习

什么时候使用Vue.js

• ### 如果你正准备开始一一个新的或者重构一个老的与DOM高度交互的特性
• ### 实时数据更新
• ### 创建一个可以被复用的组件的时候

什么时候不使用Vue.js

• ### 添加或者修改静态信息
• ### 高度依赖jQuery的特性
• ### 不存在响应式数据

Vue框架

每一个Vue捆绑需要

• #### 一个Store 存放所有数据的地方
• #### 一个Service 与server通信
• #### 和一个主组件

一个优秀的组件应该能够

• #### 通过Service从server获取数据
• #### 通过Store存储接受到的数据
• #### 安装其他组件
  

Components, Stores and Services

new_feature
├── components
│   └── component.js.es6
│   └── ...
├── store
│  └── new_feature_store.js.es6
├── service
│  └── new_feature_service.js.es6
├── new_feature_bundle.js.es6

*_bundle.js

这是一个索引文件，Vue的根实例在这里定义

Store和Service应该在这个文件中被导入和初始化，并且作为属性提供给主组件

---

组件文件夹

该文件夹下防止所有的组件。

在创建组件之前，你需要思考，是否在别的地方可以复用，例如table

---

store文件夹

Store是一个允许我们在单一源中管理状态的类。它不需要了解service或者组件。


---

service文件夹

Service是一个仅仅用来和server通信的类。不存储或处理任何数据。不需要了解Store和组件。使用axios与server通信

---

Vuex

管理应用状态，你可能使用Vuex

Vuex由State, Getters, Mutations, Actions 和 Modules组成

用户触发点击一个action，我们需要去调用它。action不会提交改变state的修改。Note:action本身不会更新state,是有mutation才能更新state

在Store文件夹下划分几个概念，增加可读性

└── store
  ├── index.js          # where we assemble modules and export the store
  ├── actions.js        # actions
  ├── mutations.js      # mutations
  ├── getters.js        # getters
  └── mutation_types.js # mutation types

• index.js,store的入口
• actions.js, action提交变更
• getters.js, 有时，我们需要以store的state为基础得到新的state，像过滤一个特殊的属性
• mutations.js, 真正修改Vuex的store中的state的唯一方法，是提交一个mutation
• mutation_types.js, 定义mutation的类型

参考

• https://docs.gitlab.com/ce/development/fe_guide/vue.html#vuex
• https://vuex.vuejs.org/zh-cn/