Awesome Open Source
Awesome Open Source

vuex-tutorial

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

newList

前言

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

vuex

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

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

实战介绍

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

组件介绍

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

组件内actions说明

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

App

App包含了组件SearchList

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

Search

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

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

clearAction 清除key的值action

SearchGroup

setSearchGroup 根据分组值进行查询action

教程

环境准备

初始化

$ npm install

开发

启动webpack环境

npm run dev

启动一个express服务器

node server.js 

构建

npm run build

License

MIT

Alternatives To Vuex Tutorial
Select To Compare


Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,089,895
Vue (68,275
Vuejs (68,275
Tutorial (23,648
Material (15,927
Vuex (5,666
Amd (3,277
Requirejs (2,554
Todos (2,165
Jackblog (11