Vue-CLI与Vuex使用方法实例分析


Posted in Javascript onJanuary 06, 2020

本文实例讲述了Vue-CLI与Vuex使用方法。分享给大家供大家参考,具体如下:

1、通过Vue-CLI创建项目

Vue-CLI是Vue用于创建Vue项目的脚手架工具,它可以快速帮你创建一个Vue项目的文件目录,使Vue开发更加便捷、标准化。

1、全局安装脚手架:npm install --global vue-cli,安装成功后可以通过vue -V查看版本号

2、初始化项目文件夹:vue init webpack 项目名,之后会出现命令行交互,根据提示设置项目名称、描述以及是否安装一些依赖包。

3、安装依赖包:在vue项目中会用到很多第三方依赖,如果是新项目或者添加了新的依赖,运行之前就需要安装依赖:npm install,有时在启动项目时会报错Error: Cannot find module 'XXX',这就是由于项目缺少依赖导致。如果npm install后仍报错,建议把依赖的文件夹node_modules删除,再重新安装依赖试一试。

4、启动项目:npm run dev,自动会在浏览器8080端口弹出项目页面。vue默认端口8080,如果需要修改,在config/index.js文件内修改port的值

5、项目打包:npm run build,在项目开发结束后打包生产dist文件夹,只需要把该文件放到服务器即可

构建项目之后生成初始文件夹:

  1. build文件夹:存放构建项目所需的文件
  2. config文件夹:项目的设置文件
    1. index.js:设置路径、跨域代理、服务器、端口号等
  3. node_modules文件夹:安装依赖的文件
  4. src文件夹
    1. assets文件夹:存放页面相关的静态文件例如CSS
    2. components文件夹:存放页面使用的公共组件
    3. router/index.js:设置访问路径所对应的页面
    4. views文件夹:存放vue页面文件
    5. app.vue:页面主入口组件
    6. main.js:页面主js入口
  5. static文件夹:存放静态资源如图片等
  6. index.html:主页面
  7. package.json:项目所使用的依赖列表

2、Vuex核心概念

Vuex是一个专门为vue.js应用开发的状态管理模式,当我们构建一个大中型SPA时,vuex可以帮助我们更好的再组建外部统一管理状态。当多个vue组件需要同时使用一些参数时,如果通过参数传递会很麻烦,而且多个组件同时操纵数据会导致开发混乱,这就需要对它们进行统一管理。

1、state:vuex中的数据源,所有组件对数据的操作都是对它,类似于vue组件中的data,在实例化vuex后可通过state访问其中的数据:

console.log(store.state.count)

2、getters:由stsate中派生出的数据,在state数据的基础上做修改。

3、mutations:vuex中state的数据不可以直接进行修改,这样会造成混乱。修改state的唯一方法是提交mutation函数。

const store = new Vuex.Store({
 state: {
  count: 0
 },
 mutations: {
  increment (state) {
   state.count++
  }
 }
})

通过提交increment来使state中的count++

store.commit('increment')

4、action:可以自定义对象来提交mutation,与mutation不同的是它可以异步执行。action通过分发的方式触发:

actions: {
  incrementAction (context) {
   context.commit('increment')
  }
 }
store.dispatch('incrementAction') //通过分发来调用action

5、module:当管理的状态过多时,vue的store对象就会变得臃肿,这时可以将其分割为几个module,每个module可以有自己的state、mutation等。

          综上,vuex的数据流图如下:当vue components触发事件时,引起分发action,action提交到mutation,mutation改变state的值,导致重新渲染vue component组件。

Vue-CLI与Vuex使用方法实例分析

3、使用vuex

1、引入vuex文件或在项目的mian.js中引入并使用

<script src="../js/vuex.js"></script>

2、实例化Vuex

const store=new Vuex.Store({
   state:{
    count:10
   },
   mutations:{
    increment(state){    //只有通过mutation中的方法才可修改store中的值
     state.count++;
    }
   }
  });

3、在app中注册store

let vue=new Vue({
   el:'#app',
   data:{
   },
   store:store
 })

4、在注册后的vue的组件couter中可以使用store,通过computed属性访问$store.state中的数据:

components:{
    counter:{
     template:`<div>计数{{count}}</div>`,
     computed:{
      count(){
       return this.$store.state.count;
      }
     }
    }
   },

5、组件的add方法通过commit改变store中的值:

<div id="app">
  <counter></counter>
  <button @click="add">点击加一</button>
</div>
methods:{
    add(){
     this.$store.commit('increment')
    }
   }

也可以通过commit进行参数传递:this.$store.commit('increment',num)

6、通过getters得到处理后的数据:

const store=new Vuex.Store({
   state:{
    count:10
   },
   getters:{     //在getters中对state中的count处理之后输出为square,供外部调用
    square(state){
     return state.count*state.count;
    }
   },
   mutations:{
    increment(state){
     state.count++;
    }
   }
  });

        通过计算属性square调用$store.getters.square

computed:{
    square(){
     return this.$store.getters.square;
    }
   }

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
Autocomplete Textbox Example javascript实现自动完成成功
Aug 17 Javascript
Jquery颜色选择器ColorPicker实现代码
Nov 14 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
May 04 Javascript
基于jQuery滑动杆实现购买日期选择效果
Sep 15 Javascript
javascript中FOREACH数组方法使用示例
Mar 01 Javascript
js中使用使用原型(prototype)定义方法的好处详解
Jul 04 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
May 30 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
Sep 19 Javascript
AngularJS中下拉框的基本用法示例
Oct 11 Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
Mar 13 Javascript
JS字符串补全方法padStart()和padEnd()
May 27 Javascript
Vue实现简单计算器
Jan 20 Vue.js
Vue前端项目部署IIS的实现
Jan 06 #Javascript
Vue学习之常用指令实例详解
Jan 06 #Javascript
Vue学习之组件用法实例详解
Jan 06 #Javascript
Vue+abp微信扫码登录的实现代码示例
Jan 06 #Javascript
Vue学习之axios的使用方法实例分析
Jan 06 #Javascript
vue 微信扫码登录(自定义样式)
Jan 06 #Javascript
React学习之JSX与react事件实例分析
Jan 06 #Javascript
You might like
php 文件下载 出现下载文件内容乱码损坏的解决方法(推荐)
2016/11/16 PHP
php实现微信企业转账功能
2018/10/02 PHP
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
2010/05/04 Javascript
javascript控制swfObject应用介绍
2012/11/29 Javascript
js获取事件源及触发该事件的对象
2013/10/24 Javascript
js动态设置div的值下例子
2013/10/29 Javascript
JavaScript中几种排序算法的简单实现
2015/07/29 Javascript
js实现简单的联动菜单效果
2015/08/19 Javascript
在Html中使用Requirejs进行模块化开发实例详解
2016/04/15 Javascript
Javascript实现代码折叠功能
2016/08/25 Javascript
p5.js 毕达哥拉斯树的实现代码
2018/03/23 Javascript
vue实现压缩图片预览并上传功能(promise封装)
2019/01/10 Javascript
解决Layui 表格自适应高度的问题
2019/11/15 Javascript
javascript中的相等操作符(==与===区别)
2019/12/21 Javascript
js面向对象之实现淘宝放大镜
2020/01/15 Javascript
Nodejs + sequelize 实现增删改查操作
2020/11/07 NodeJs
javascript中闭包closure的深入讲解
2021/03/03 Javascript
跟老齐学Python之再深点,更懂list
2014/09/20 Python
Python中格式化format()方法详解
2017/04/01 Python
Python中文件的写入读取以及附加文字方法
2019/01/23 Python
Python面向对象原理与基础语法详解
2020/01/02 Python
python统计文章中单词出现次数实例
2020/02/27 Python
numpy矩阵数值太多不能全部显示的解决
2020/05/14 Python
墨尔本最受欢迎的复古风格品牌:Princess Highway
2018/12/21 全球购物
Tiqets英国:智能手机上的文化和娱乐门票
2019/07/10 全球购物
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
茱莉蔻美国官网:Jurlique美国
2020/11/24 全球购物
如何打开WebSphere远程debug
2014/10/10 面试题
土木工程应届生自荐信
2013/09/24 职场文书
大学生的应聘自我评价
2013/12/13 职场文书
自我评价是什么
2014/01/04 职场文书
部队领导证婚词
2014/01/12 职场文书
创建省级文明单位实施方案
2014/02/27 职场文书
工会趣味活动方案
2014/08/18 职场文书
聊聊SpringBoot自动装配的魔力
2021/11/17 Java/Android
Pytorch中expand()的使用(扩展某个维度)
2022/07/15 Python