yelingfeng / 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

vuex-tutorial's Issues

按步骤但是8400端口没东西显示，是不是文件没写完？

如题~

GET_SEARCH_LIST、GET_SEARCH_GROUP_DATA 这两个mutations好像没写

找了很多遍都没看到这两个mutations

请问类似<router-link 渲染问题

我使用requirejs加载vue-router之后，发现页面的<router-link标签并没有没vue渲染，我觉得是vuejs和页面元素加载顺序的问题,把vuejs和vue-routerjss使用<script标签在页面的head部加载后就渲染正常；这类问题怎么处理？虚心请教

Failed at the [email protected] dev script 'gulp serve'.

npm install 后，npm run dev 报错，如下：请问怎么解决，谢谢。

19 error node v6.3.0
20 error npm v3.10.3
21 error code ELIFECYCLE
22 error [email protected] dev: gulp serve
22 error Exit status 1
23 error Failed at the [email protected] dev script 'gulp serve'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the vuex-tutorial package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error gulp serve

两个问题关于gulp-env， gulp-sequence

gulp.task("default", ["build", "run_service", "watch"]);
这样可以，为什么要用gulp-sequence？？
还境变量：
process.env.NODE_ENV = production
为什么要用gulp-env??

新手不懂，麻烦指教~~

有关mapMutations的使用

《vuex 2.x新版使用指南》中第4点提到的 mapMutations 和第2点的更灵活，结合官方vuex的todomvc例子来看的话，就不是一般的灵活了。作者直接推荐 store.commit，或者mapMutations后直接调用mutations函数！是不是意味着能不用getters就不用getters，能直接使用mutations的绝不使用actions？

启动服务器之后报错

我按照步骤，先npm run dev,然后 node server.js 然后报错：

Error: ENOENT: no such file or directory, stat '/Users/helen/Downloads/study/vue/vuex-tutorial/dist/index.html'
   at Error (native)

知道是什么原因么