什么时候使用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或者组件。
![状态管理](https://cn.vuejs.org/images/state.png =500x)
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的类型