delktsai / vuex-tutorial

vuex tutorial

vuex-tutorial

一个vuex教程 主要介绍如何实际操作vuex demo

newList

• vuex2.x新旧变化整理
• requirejs快速构建教程
• 新增amd版本

前言

该代码示例使用的vue相关资源 详细看package.json 核心(vue+vuex) 其他相关参考jackblog 工程(使用了该项目的gulp和webpack配置)

• Vuejs
• Vuex
• Vue-resource
• bootstrap-material-design

vuex

一句话介绍vuex是什么,官方说明"一个专门为 Vue.js 应用设计的状态管理架构"

状态管理: 简单理解就是统一管理和维护各个vue组件的可变化状态(你可以理解成vue组件里的某些data)

实战介绍

完成一个简单搜索查询功能 效果如下

组件介绍

• App 主程序组件
• Search 搜索框组件
• SearchGroup 分组类型组件
• List 结果集合组件

组件内actions说明

(这里主要描述调用逻辑 结果都是一个list)

App

App包含了组件Search和List

searchResultList 返回结果action 直接从actions获取放到list中

Search

Search组件中包含子组件SearchGroup 主要包含功能

searchAction 根据key进行查询action 放大镜和回车同时绑定了事件

clearAction 清除key的值action

SearchGroup

setSearchGroup 根据分组值进行查询action

教程

• 目录结构
• requirejs快速构建教程
• TODOS2

环境准备

初始化

$ npm install

开发

启动webpack环境

npm run dev

启动一个express服务器

node server.js 

构建

npm run build

License

MIT