vuex

原文链接: vuex 购物车 收藏实现 使用vuex 存放收藏的商品 实现在列表页可以收藏，在收藏也可以查看 图标下载，可以选择颜色，大小和格式 http://www.iconfont.cn/ vuex 管理状态，提供添加和删除操作，以及判断某一商品是否已经被收藏 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state = { list: [] } const mutations = { add(state, item) { state.list.push(item) state.list = Array.from(new Set(state.list)); }, remove(state, item) { state.list = state.list.filter((i) => { return i['name'] != item['name'] }) } } const getters = { isExit: (state, getters) => (i) => state.list.some( (item) => item['name'] == i['name'] ) } export default new Vuex.Store({ state, mutations, getters,

用vuex写了一个购物车H5页面的示例代码： https://www.jb51.net/article/152008.htm 通过购物车的一个案列，把vuex学习了一篇。 vuex概念浅谈 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。简单的来说，就是数据共用，对数据集中起来进行统一的管理。 如果您的应用够简单，您最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了。但是，如果您需要构建是一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。 核心概念主要有这些 State Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态，将所需要的数据写放这里，类似于data。 Getter 有时候我们需要从 store 中的 state 中派生出一些状态，使用Getter，类似于computed。 Mutation 更改 Vuex 的 store 中的状态的唯一方法，类似methods。 Action Action 提交的是 mutation，而不是直接变更状态，可以包含任意异步操作，这里主要是操作异步操作的，使用起来几乎和mutations方法一模一样,类似methods。 Module

路由跳转 三种方式： $router.push / $router.go / router-link to this.$router.push( ' /course ' ); this.$router.push({name: course}); //这个name是router.js里面设置的name this.$router.go( -1 ); //页面后退 this.$router.go( 1 ); //前进 <router-link to= " /course " >课程页</router-link> <router-link :to= " {name: 'course'} " >课程页</router-link> 路由传参 第一种： router.js设置 routes: [ // ... { path: ' /course/:id/detail ' , // :id接收参数 name: ' course-detail ' , component: CourseDetail }, ] 跳转 .vue <template> <router-link :to= " ` /course/${course.id}/detail ` " >{{ course.name }}</router-link> </template> <script> // ... goDetail() {

大家好，我是一叶，经过一段时间对vue的学习，我打算把vue做一个系列，把踩过的坑和大家分享一下。 现在开始第一章：vue引用并封装echarts 在文章开始前，我先舔波echarts（真香）。阿里的G2和百度的echarts都是很不错的，echarts上手难度小，并且用户多，文档多，生态环境较好，所以中小项目的话echarts就是首选。加个题外话，我把G2、echarts都po出来，大家凭喜好选取。 G2官方demo地址： https://antv.alipay.com/zh-cn/index.html echarts官方demo地址： https://echarts.baidu.com/ 现在开始干活，进入echarts网址中，我们能看到，图表的主要参数都在option这函数里，如图1所示。我们将option（）放到vue中的methods中即可引用。 图1 在项目中打开命令行（直接在地址栏输入cmd即可打开dos面板），输入命令，如图2 所示。 npm install echarts 图2 打开项目，创建views文件夹，存放父组件index.vue，在components文件夹下创建echartscom.vue子组件，如图3所示。echartscom.vue中主要放option（），用来实现图表渲染，index.vue存放数据，echartscom.vue引用index

1.1 axios 简介与安装 　　1、axios简介 　　　　　　1. vue本身不支持发送AJAX请求，需要使用vue-resource、axios等插件实现 　　　　　　2. axios是一个基于Promise的HTTP请求客户端，用来发送请求，也是vue2.0官方推荐的，同时不再对vue-resource进行更新和维护 　　　　　　3. 参考：GitHub上搜索axios，查看API文档： https://github.com/axios/axios 　　2、安装axios 　　　　　　1. npm install axios -S # 也可直接下载axios.min.js文件 　　　　　　2. 下载后即到 C:\Users\tom\node_modules\axios\dist 路径下找到 axios.min.js 文件 1.2 axios 基本用法 　　1、 axios最基本使用 <! DOCTYPE html > < html lang ="en" > < head > < meta charset ="UTF-8" > < title > 发送AJAX请求 </ title > </ head > < body > < div id ="itany" > < button @click ="sendGet" > GET方式发送AJAX请求 </ button > <