vuex

前言 这篇文章是【前端词典】系列文章的第 13 篇文章，接下的 9 篇我会围绕着 Vue 展开，希望这 9 篇文章可以使大家加深对 Vue 的了解。当然这些文章的前提是默认你对 Vue 有一定的基础。如果一点基础都没有，建议先看官方文档。 第一篇文章我会结合 Vue 和 Vuex 的部分源码，来说明 Vuex 注入 Vue 生命周期的过程。 说到源码，其实没有想象的那么难。也和我们平时写业务代码差不多，都是方法的调用。但是源码的调用树会复杂很多。 为何使用 Vuex 使用 Vue 我们就不可避免的会遇到组件间共享的数据或状态。应用的业务代码逐渐复杂，props、事件、事件总线等通信的方式的弊端就会愈发明显。这个时候我们就需要 Vuex 。Vuex 是一个专门为 Vue 设计的状态管理工具。 状态管理是 Vue 组件解耦的重要手段。 它借鉴了 Flux、redux 的基本思想，将状态抽离到全局，形成一个 Store。 Vuex 不限制你的代码结构，但需要遵守一些规则： 应用层级的状态应该集中到单个 store 对象中 提交 mutation 是更改状态的唯一方法，并且这个过程是同步的 异步逻辑都应该封装到 action 里面 Vuex 注入 Vue 生命周期的过程 我们在安装插件的时候，总会像下面一样用 Vue.use() 来载入插件，可是 Vue.use() 做了什么呢？

与React 相似： （1）虚拟DOM（Virtual DOM） 虚拟DOM的诞生是基于：改变真实的DOM状态远比改变一个JS对象的花销要大的多。 虚拟DOM是一个映射真实DOM的JS对象，当有变化产生时，就会创建一个新的虚拟DOM对象，计算新旧Virtual DOM的差别，然后把这些差别应用在真实的DOM上。 虚拟DOM的本质是嵌套着数组的原生对象，当新一项被加进当前JavaScript对象时，一个函数会计算新旧Virtual DOM的差异且反应在真实的DOM上。高性能框架提供了计算这些差异的算法。（核心） Vue在渲染过程中会跟踪每一个组件的依赖关系，不需要重新对整个组件树渲染，Vue默认进行了优化； React每当应用的状态被改变时，全部子组件都会重新渲染，可以通过shouldComponentUpdate（一种生命周期方法）来进行控制，以避免不必要的渲染开销。 （2）可视化组件 组件化应用：把一个应用拆分成功能明确的模块，每个模块之间通过某种方式互相关联 （3）都提供了路由和状态管理模块 不同： （1）模板与JSX 最大的区别是模板不同，Vue模板近似常规的HTML，使用HTML模板进行渲染，把html、css、js组合到一起，用各自的处理方式，提供了模板引擎处理 React推荐使用JSX--一种JS语法扩展（JS混杂着XML语法），使用编程思维书写模板，思路是all in

一 课程分类显示 宗旨：总的再次过滤 二 Cookie # export default new Vuex.Store({ state: { name:'', token:'', }, mutations: {}, actions: {} }) #全局数据 #赋值 methods:{ upup:function () { let _this=this this.$http.request({ url:'http://127.0.0.1:8000/login/', method:'post', data:{ name:_this.name, pwd:_this.pwd } }).then(function (response) { _this.$store.state.name=response.data.name _this.$store.state.token=response.data.token }) }, } #取值 < span class ="pull-right" v-if ="!this.$store.state.token" > Vuex状态管理器stoer介绍 vue-cookies -安装:npm install vue-cookies -使用: -store.js中导入import Cookie from 'vue-cookies' -取值:Cookie

最近碰到了比较多的关于vue的eventBus的问题，之前定技术选型的时候也被问到了，vuex和eventBus的使用范围。所以简单的写一下。同时有一种特殊的实现方案。 有这么几种数据传递方式，vuex、props、eventBus和特殊的eventBus。 vuex 不介绍，数据量和复杂度达不到不用它你才会向下看。 props 父子组件传值，官方api，只写个demo。 1.父组件 <son :info="info" @update="updateHandler"/> // data info: 'sendToSon' // methods updateHandler (newVal) { this.info = newVal } 　　 2.子组件 // props props: ['info'] // 向上传值，某个方法中使用 this.$emit('update', 'got') 父向子传值-->props 子向父传值-->子组件绑定事件回调定义在父组件，子组件触发此事件。 因不推荐子组件内直接修改父组件传入的props，需使用自定义事件。 eventBus bus皆为导入的bus实例 // bus const bus = new Vue() // 数据接收组件 // 当前组件接收值则 bus.$on('event1', (val)=>{}) // 数据发出组件 //

1、父子组件间的传值与vuex 起初，弹框的显示我都用了vuex来实现，虽然可以实现但没有真正发挥vuex是用处，属于滥用了，直到大牛指点说vuex一般都用来处理接口请求回来的复用性高的数据，而不是什么都用vuex，弹框就直接使用父子之间的传值就可以了（vuex--为了没有直接关系的组件间的数据共享，用在调用接口上即可，不要滥用）。 ① 父子组件间的传值 父--子：父在子组件标签里通过 :xxx="xxx" 的方式传给子组件，子组件通过props接收，如若要改变接收过来的值就在计算属性里改变而不直接改变props的值，改变的时候需要设置set(){}； 子--父：通过 $emit 方法传递（虽然传递的是方法，但是是在父组件里监听然后改变对应的值，可以看做是将操作控制权还给了父组件）；$emit传递给父组件后，具体的值的改变写在父组件里； // 父组件 <Button @click="handleShowSon">显示子组件</Button> // @监听子组件传过来的方法，:给子组件传值 <son @sonEmit=“onSonEmit" :showSon="showSon" ></son> <script> export default{ data(){ return { showSon:false, } }, methods:{ handleShowSon(){ this

webpack在build包的时候，有时候会遇到打包时间很长的问题，这里提供了一个解决方案，让打包如丝般顺滑~ 1. 介绍 在用 Webpack 打包的时候，对于一些不经常更新的第三方库，比如 react ， lodash ， vue 我们希望能和自己的代码分离开，Webpack 社区有两种方案 CommonsChunkPlugin DLLPlugin 对于 CommonsChunkPlugin ，webpack 每次打包实际还是需要去处理这些第三方库，只是打包完之后，能把第三方库和我们自己的代码分开。而 DLLPlugin 则是能把第三方代码完全分离开，即每次只打包项目自身的代码。Dll这个概念是借鉴了Windows系统的dll，一个dll包，就是一个纯纯的依赖库，它本身不能运行，是用来给你的app引用的。 2. 模板webpack-simple 用法 要使用 DLLPlugin ，需要额外新建一个配置文件。所以对于用这种方式打包的项目，一般会有下面两个配置文件 webpack.config.js webpack.dll.config.js 在项目根目录新建一个文件 webpack.dll.config.js const path = require('path'); const webpack = require('webpack'); module.exports = {

程序IT圈 www.cxyquan.com 优秀程序猿技术公众号 作者：缘自世界 https://segmentfault.com/a/1190000016801687 最近，在持续关注一个Twitter话题，就是 Why do people decide to use frameworks? ，这个话题是由Nicole Sullivan提出的。 刚开始，我对这个问题也没有太在意，也就是随意的看了看，正如提问者Nicole Sullivan说的那样，我刚开始也觉得这是一个愚蠢的问题。但是这个问题就像蒲公英的种子一样，就这么在我的脑海里扎了根，截至到我这写这篇文章之前，我都有一直关注这个问题，并且在思考这个问题。 虽然这个问题看似简单，你或多或少都能回答出那么一两点，但是我想你可能自己也对自己的回答不太满意吧？不管你怎么想的，但我渐渐收起了我从一开始的轻视态度，开始正视这个问题。 在这里，我还要感谢Nicole Sullivan，是她的这个话题，让我对为什么使用框架有了全方位的了解。 为什么用 可以集中精力在业务的实现，而不用把过多的精力和人力用在代码功能逻辑的实现上。 可以避免由我们自己写带来的很多bug。 可以暂时快速的解决掉某一问题，以待以后的进一步解决。 可以避免写技术文档和介绍功能实现给团队成员的问题。 可以极大的缩短开发的周期。 因为成熟的框架本身就是完善的解决方案

作者：缘自世界 https://segmentfault.com/a/1190000016801687 最近，在持续关注一个Twitter话题，就是 Why do people decide to use frameworks? ，这个话题是由Nicole Sullivan提出的。 刚开始，我对这个问题也没有太在意，也就是随意的看了看，正如提问者Nicole Sullivan说的那样，我刚开始也觉得这是一个愚蠢的问题。但是这个问题就像蒲公英的种子一样，就这么在我的脑海里扎了根，截至到我这写这篇文章之前，我都有一直关注这个问题，并且在思考这个问题。 虽然这个问题看似简单，你或多或少都能回答出那么一两点，但是我想你可能自己也对自己的回答不太满意吧？不管你怎么想的，但我渐渐收起了我从一开始的轻视态度，开始正视这个问题。 在这里，我还要感谢Nicole Sullivan，是她的这个话题，让我对为什么使用框架有了全方位的了解。 为什么用 可以集中精力在业务的实现，而不用把过多的精力和人力用在代码功能逻辑的实现上。 可以避免由我们自己写带来的很多bug。 可以暂时快速的解决掉某一问题，以待以后的进一步解决。 可以避免写技术文档和介绍功能实现给团队成员的问题。 可以极大的缩短开发的周期。 因为成熟的框架本身就是完善的解决方案。一般它们都有自己的生态系统，有众多技术达人参与。这样我们在使用中