vue-loader/vue-cli/vuex
vue-loader:
webpack 提供的支持vue的一个预编译器,通过它可以编译 sfc格式专业的VUE组件。
1、安装vue-loader
npm install -D vue-loader vue-template-compiler
2、配置webpack(注意的是除了配置规则外还需要引入loader插件)
// webpack.config.js const VueLoaderPlugin = require('vue-loader/lib/plugin')module.exports = {module: {rules: [// ... 其它规则 {test: /\.vue$/,loader: 'vue-loader'}]},plugins: [// 请确保引入这个插件!new VueLoaderPlugin()] }
vue-cli:vue项目搭建命令行工具,包括cli 、cli service 、cli 插件,关于具体的说明个人也没有看完,只是单纯做个了解,需要使用vue-cli 构建项目的小伙伴请看官网文档https://cli.vuejs.org/zh/guide/browser-compatibility.html#usebuiltins-usage。
1、安装
npm install -g @vue/cli
# OR
yarn global add @vue/cli
2、创建项目
vue create hello-world
图形化创建
vuex:学习vuex 目前主要是因为uni-app 中提到了它,并且在某些情境性下用来管理状态非常实用。
注册状态
Vuex 选项:
1、state :单一状态树
响应式状态,使用vue的计算属性获取状态
根注入:
辅助函数:获取多个状态,mapState,绑定data,名称相同的情况下使用字符串数组。
其返回的是一个对象,在与计算属性合并的时候,直接通过扩展运算符展开即可。
2、Getter
相当于对states的计算。
通过getters 访问:
mapGetters:辅助函数
类似states,一次性获取多个getter(它只是映射给局部属性)
3、Mutation:提交mutation 更改状态
const store = new Vuex.Store({state: {count: 1},mutations: {increment (state) {// 变更状态state.count++}} })
事件调用:
store.commit('increment')
传参:
store.commit('increment', 10)
mutations: {increment (state, n) {state.count += n} }
第二种调用范式:对象参数,必须包涵type 属性(个人觉得用第一种就可以了)
添加新属性:(最好不要添加,在初始化的时候就定义好所有属性)
Vue.set(obj, 'newProp', 123)
另外官网说明mutaion 必须是同步函数,因为不可追踪,因为每一条 mutation 被记录,devtools 都需要捕捉到前一状态和后一状态的快照。
mapMutations:辅助函数,可以定义在methods中进行使用。
4、Action : 这个就有意思了,官方说明。
区别时它可以提交mutaion,而且可以包涵异步操作,它接收与store实例相同方法和属性的上下文对象,也就是说可以随意访问store中的东西~
actions: {increment (context) {context.commit('increment')}}
官方举例:购物车
组件中调用:dispatch、或者使用赋值函数 mapActions
Action 返回一个promise ,所以我们可以监听到事件的处理步骤,或者说什么时候结束。(关于promise ,可以参考《你不知道的JavaScript(中)》或者看阮一峰的es6 promise章节)
这里还是提及一下,上面的实例中action 方法第一个参数如{commit,state}是es6提供的对象解构赋值功能,如果你还没了解的话,去看一下教程,阮一峰大神那也有。
5.module:模块
由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。
为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割
使用module后,在action 和 getters 的方法中获取根节点状态 rootState
访问全局内容:使用Action调用dispatch的时候使用root action需要添加一个参数对象{root:true}
在module中定义全局Action,除了添加参数并且把实际函数内容丢到handler 中。
关于访问module中的属性和方法,除了通过命名空间外还可以通过传参的方式绑定某个module
模块动态注册:这个不看了,实际用的情况不多或者基本为不用,感兴趣的自己去看看吧。
模块重用,使用函数式声明:
const MyReusableModule = {state () {return {foo: 'bar'}},// mutation, action 和 getter 等等... }
对于store 的项目结构,官方推荐如果有多个store ,建立store目录集中管理。
扩展:插件
可以自定义插件,对store进行扩展,它接受store作为唯一的参数,每次mutation调用时都用进行调用,这是一个钩子~
关键函数(订阅):
store.subscribe(mutation => {if (mutation.type === 'UPDATE_DATA') {socket.emit('update', mutation.payload)}})
state快照(关于比对前后状态的用处,在react 官网的入门教程中的例子非常形象,如果感兴趣可以去看看,看完之后对状态前后对比会有一定的认知),此处使用lodash库,关于它的用法可以官网查看,非常实用(_.cloneDeep);
关于严格模式,官网中提及,故不用呗,并且在表单处理中对v-model 指令也会有一定的影响。
关于测试,有很多第三方测试模块可以使用,另外关于热重载,使用webpack 提供的dev-server 即可且方便又实用。
这篇文章主要是因为在学习uni-app 中遇到了vuex的知识点,故学习vuex的知识更深度的api等信息,此处不表(我也没看)
转载于:https://www.cnblogs.com/jony-it/p/11328126.html
vue-loader/vue-cli/vuex相关推荐
- Vue教程5【vuex】getters,mapState,mapGetters,mapActions,mapMutations,模块化namespace
vuex 什么时候需要使用? 状态(数据)共享! vuex工作原理 搭建vuex环境 创建文件 src/store/index.js//全局安装[--save生产环境] npm install -g ...
- 老弟,来了?VUE+Nuxt.js+Koa+Vuex入门教程(一)仿写一个cnode网站
if(有工作){if(工作地址 == "深圳" || 工作地址 == "广州" ){do(请联系作者,qq:1172081598)} } 何为Nuxt.js N ...
- Vue进阶——Vue CLI
Vue进阶--Vue CLI 前言 一.什么是Vue CLI? 二.怎么安装Vue CLI? 1.Node 版本要求 2.已安装旧版本 3.安装完成 三.Vue CLI 基础运用 1.Vue ui项目 ...
- Vue安装到入门 + vuex使用
1.Node和NPM NPM是Node提供的模块管理工具,可以非常方便的下载安装很多前端框架,包括Jquery.AngularJS.VueJs都有.为了后面学习方便,我们先安装node及NPM工具. ...
- 少侠请重新来过 - Vue学习笔记(八) - Vuex
Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. State Vuex ...
- 在 vue 组件中查看 vuex 定义
原文:在 vue 组件中查看 vuex 定义 在进行 vue 项目开发的时,如果项目中用到了 vuex 做状态管理,经常需要查看 store 里面定义的状态属性.但是在 vue 组件中引用这些 vue ...
- 在vue组件中使用vuex的state状态对象的5种方式
下面是store文件夹下的state.js和index.js内容 state.js //state.js const state = {headerBgOpacity:0,loginStatus:0, ...
- Vue.js实战之Vuex的入门教程
在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式. 但是如果是大型项目,很多时候都需要在子组件之间传递数据,使用之前的方式就不太方 ...
- Vue教程-4-Vue CLI快速入门
目录 1.Webpack与脚手架 2.Vue CLI使用 2.1.安装CLI3 3.Vue-CLI2新建项目 4.Vue-CLI2目录结构 4.1.扩展 5.如何关闭ESLint规范? 6.Runti ...
- vue组件中数据共享——vuex
目录 vuex是什么? 使用vuex统一管理状态的好处 什么样的数据适合存储到vuex中 安装vuex 使用vuex vuex核心概念 组件访问state中数据的第一种方式: 组件访问state中数据 ...
最新文章
- Linux那些事儿 之 戏说USB(11)繁华落尽
- python 学习总结6 前端学习2
- Python 位运算符号
- android学习笔记九——RatingBar
- jquery 获取 id ,但是id 里面不能有. 这个符号
- 2013汇总计算 广联达gcl_广联达图形算量GCL2013整体操作流程图文教程详解
- python怎么算积分_python计算积分
- SpringCloud工作笔记046---PostMan打不开怎么解决
- amd显卡风扇调节_AMD Crimson驱动程序导致显卡风扇速度过低,官方: 请尽快修复...
- 图像处理中饱和度、色调、对比度的定义
- HTML5期末大作业:个人生活网站设计——简单的个人生活记录介绍网页模板HTML+CSS+JavaScript 生活网页HTML代码 学生网页课程设计期末作业下载 动漫大学生网页设计制作成
- NOIP总结与反思及对今后的期望
- 《地平线:零之曙光》——游戏体验和主观评价
- Nginx可视化配置工具—NginxWebUI
- 微软Office Powerpoint双击打不开后的修复办法
- PHP会员自动续费,switch会员自动续费怎么关
- 数学建模之预测方法总结
- 【机器学习】入门001
- Python停车管理系统毕业设计-附源码271400
- 【MATLAB教程案例39】语音信号的PCM编解码matlab仿真学习
热门文章
- ig服务器维护,LOL国服道歉:夺冠之后服务器卡了四天 IG的回复亮了
- centos mate桌面_Centos7MATE桌面使用VNC
- 华为鸿蒙登陆手机,华为鸿蒙2.0正式开源,明年登陆手机,网友:我已上手,感觉良好...
- git: Your branch and ‘origin/xxx‘ have diverged,and have 1 and 1 different commits each, respectivel
- 自定义Spring Boot Starters
- 测试Bitmap和Marshal.Copy
- 基于Hadoop的大数据平台实施架构的规划
- Android studio使用svn创建分支及合并分支----终极图解
- 在 JavaScript 中比较字符串的 4 种方法
- nacos注册中心发现不到服务