web前端vue之vuex单独一文件使用方式实例详解


Posted in Javascript onJanuary 11, 2018

Vuex 是什么?

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

上次我用了一个加减的例子为大家讲解vuex的基本的使用方式,和在什么样的情况下使用。上次还是在一个组件内把这个例子简单的展示了下,这次我把vuex抽离出来一个单独的文件,统一管理整个项目的状态。

上次也说了如果你的项目够大,那用vuex来管理整个项目的状态,那是再好不过的,如果是小项目的话就不推荐大家使用。好了废话不多说上码:

当你把项目的都准备好后,都安装好了vue-cli,webpack,vuex,router等

第一步新建一个叫:store.js的文件内容如下:

import Vue from 'vue' //引入vue
import Vuex from 'vuex' // 引入vuex
Vue.use(Vuex)  // 注册vuex
export default new Vuex.Store({ // 暴露与new vuex
 state: { // 相当于vue里data 存放整个项目的各个状态
  number: 0 
 },
 mutations: { //相当于vue里的methods放方法的,定义一些可以用来调用和修改state里的状态值
   addFun (state,num) { 
    state.number = num
   }
 }
})

这个状态管理的文件都建好了,接下来就是怎么去调用了

<template>
 {{numbertxt}}
 <button @click="addfun(1)">按钮1</button>
 <button @click="addfun(2)">按钮2</button>
</template> 
<script>
import store from 'store.js' // 老样先要引入
 export default{
  store:store, // 定义
  computed: { //实时监听
    numbertxt () { // 实时监听在store.js里的值改变
     return store.state.number
    }
   },
  methods:{
   addfun(num){
    store.commit('addFun',num) 
    //显式的提交 (commit) mutation里的方法来改变值
   }
  }
}
</script>

好了整个稍微复杂点vuex独立抽离的例子就到这里了,有不懂的朋友或喜欢vue的可以加我微信(nihaomeili87)我们一起进步!

总结

以上所述是小编给大家介绍的web前端vue之vuex单独一文件使用方式实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js tab 选项卡
Apr 26 Javascript
学习ExtJS(一) 之基础前提
Oct 07 Javascript
jquery实现marquee效果(文字或者图片的水平垂直滚动)
Jan 07 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
Mar 23 Javascript
详解JavaScript中的表单验证
Jun 16 Javascript
jQuery检查事件是否触发的方法
Jun 26 Javascript
手机端转盘抽奖代码分享
Sep 10 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
Dec 02 Javascript
js实现遍历含有input的table实例
Dec 07 Javascript
jquery ztree异步搜索(搜叶子)实践
Feb 25 Javascript
原生js实现弹出层登录拖拽功能
Dec 05 Javascript
JS中使用new Option()实现时间联动效果
Dec 10 Javascript
vue-cli webpack 引入jquery的方法
Jan 10 #jQuery
JS计算两个时间相差分钟数的方法示例
Jan 10 #Javascript
Vuex 入门教程
Jan 10 #Javascript
js实现上传并压缩图片效果
Jan 10 #Javascript
web前端vue之CSS过渡效果示例
Jan 10 #Javascript
Vue.js分页组件实现:diVuePagination的使用详解
Jan 10 #Javascript
利用ECharts.js画K线图的方法示例
Jan 10 #Javascript
You might like
收音机术语解释
2021/03/01 无线电
一个php生成16位随机数的代码(两种方法)
2014/09/16 PHP
php等比例缩放图片及剪切图片代码分享
2016/02/13 PHP
PHP中静态变量的使用方法实例分析
2016/12/01 PHP
关于PHP内置的字符串处理函数详解
2017/02/04 PHP
Laravel中为什么不使用blpop取队列详析
2018/08/01 PHP
PHP后期静态绑定实例浅析
2018/12/21 PHP
Javascript之文件操作
2007/03/07 Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
2013/02/07 Javascript
javascript if条件判断方法小结
2014/05/17 Javascript
jQuery固定浮动侧边栏实现思路及代码
2014/09/28 Javascript
jquery ui bootstrap 实现自定义风格
2014/11/14 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
2015/11/24 Javascript
js+css实现select的美化效果
2016/03/24 Javascript
Markdown+Bootstrap图片自适应属性详解
2016/05/21 Javascript
常用Javascript函数与原型功能收藏(必看篇)
2016/10/09 Javascript
jQuery动态添加与删除tr行实例代码
2016/10/18 Javascript
Element input树型下拉框的实现代码
2018/12/21 Javascript
js实现随机点名功能
2020/12/23 Javascript
python聊天程序实例代码分享
2013/11/18 Python
Python读写文件方法总结
2015/06/09 Python
Python 数据库操作 SQLAlchemy的示例代码
2019/02/18 Python
Python PyInstaller安装和使用教程详解
2020/01/08 Python
PyCharm安装PyQt5及其工具(Qt Designer、PyUIC、PyRcc)的步骤详解
2020/11/02 Python
CSS3正方体旋转示例代码
2013/08/08 HTML / CSS
Theory美国官网:后现代都市风时装品牌
2018/05/09 全球购物
美国在线乐器和设备商店:Musician’s Friend
2018/07/06 全球购物
Bandier官网:奢侈、时尚前卫的健身服装首选目的地
2020/07/05 全球购物
会计主管岗位职责
2014/01/03 职场文书
教师个人鉴定材料
2014/02/08 职场文书
车辆年检委托书范本
2014/10/14 职场文书
倡议书范文大全
2015/04/28 职场文书
教师节祝酒词
2015/08/11 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书
MySQL安装失败的原因及解决步骤
2022/06/14 MySQL
Nginx如何配置多个服务域名解析共用80端口详解
2022/09/23 Servers