侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

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

前端  /  管理员 发布于 3年前   152

本文实例讲述了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组件。

3、使用vuex

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

 

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:`计数{{count}}`,     computed:{      count(){       return this.$store.state.count;      }     }    }   },

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

   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程序设计有所帮助。

您可能感兴趣的文章:

  • Vuex的API文档说明详解
  • Vuex模块化应用实践示例
  • 浅谈vuex为什么不建议在action中修改state
  • vuex+axios+element-ui实现页面请求loading操作示例
  • 一看就会的vuex实现登录验证(附案例)
  • Vuex实现数据共享的方法
  • 使用vuex较为优雅的实现一个购物车功能的示例代码
  • VUEX-action可以修改state吗
  • vue-router结合vuex实现用户权限控制功能
  • 解决vuex数据异步造成初始化的时候没值报错问题
  • VUEX 数据持久化,刷新后重新获取的例子
  • 实现vuex与组件data之间的数据同步更新方式
  • vuex管理状态 刷新页面保持不被清空的解决方案
  • vuex实现数据状态持久化
  • vuex存储token示例
  • Vuex实现数据增加和删除功能
  • VUE:vuex 用户登录信息的数据写入与获取方式
  • Vue的状态管理vuex使用方法详解


  • 上一条:
    查询电脑开关机时间的vbs代码
    下一条:
    vbs 调用中文语音让你电脑听你的命令的实现代码
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • nginx + vue配置实现同域名下不同路径访问不同项目(0个评论)
    • 在js中使用URL类用来解析处理URL的示例代码(0个评论)
    • js中动画事件:requestAnimationFrame、transitionend、animation...(0个评论)
    • 在js中mouseover和 mouseenter的区别浅析(0个评论)
    • uniapp调用手机实现打电话录音功能示例代码(0个评论)
    • 近期文章
    • ChatGPT再出新功能,推出插件功能,能联网、搜索了(0个评论)
    • 在go语言中使用GoPDF包把html生成PDF文件示例(0个评论)
    • 在go语言中创建和解析(读取)符号链接示例(0个评论)
    • ubuntu 22.04系统中报错:Python 3.6 is no longer supported by the Python core team...解决方式(0个评论)
    • Laravel 10.4版本发布(0个评论)
    • mysql5.7中实现分区表及分区where in查询示例及分区分表对比浅析(0个评论)
    • nginx + vue配置实现同域名下不同路径访问不同项目(0个评论)
    • 在laravel框架中的5个HTTP客户端技巧分享(0个评论)
    • 在go语言中使用FFmpeg库实现PCM音频文件编码为mp3格式文件流程步骤(0个评论)
    • gopacket免安装Pcap实现驱动层流量抓包流程步骤(0个评论)
    • 近期评论
    • 博主 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 @ xiaoB 你只管努力,剩下的叫给天意;天若有情天亦老,..
    • xiaoB 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 会不会春节放假后又阳一次?..
    • BUG4 在

      你翻墙过吗?国内使用vpn翻墙可能会被网警抓,你需了解的事中评论 不是吧?..
    • 博主 在

      go语言+beego框架中获取get,post请求的所有参数中评论 @ t1  直接在router.go文件中配就ok..
    • Jade 在

      如何在MySQL查询中获得当月记录中评论 Dear zongscan.com team, We can skyroc..
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客