vuex 的简单使用


Posted in Javascript onMarch 22, 2018

什么是Vuex?

vuex是一个专门为vue.js设计的集中式状态管理架构。状态?我把它理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态。简单的说就是data中需要共用的属性。

1.在vue 组件中

执行enabledcheckbox方法 ,true 为参数,用来改变state中的值

this.$store.dispatch("enabledcheckbox",true)

从state获取useredit的值

this.$store.state.useredit

2 在vuex导出的对象对添加 值到state

添加 mutations 来改变state的值

添加 actions 来 mutations

import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex)
export default new vuex.Store({
    state: {
      useredit: false,
    },
    mutations: {
      ENABLEDCHECKBOX(state, value) {
        state.checkboxDisable = value
      },
    },
    actions: {
      enabledcheckbox({ commit }, value) {
        commit('ENABLEDCHECKBOX', value)
      },
    }
  })
  //console.log(vuex)

在main.js

import store from './vuex'
new Vue({
 el: '#app',
 router,
 store,
 render:h=>h(App)
})

总结

以上所述是小编给大家介绍的vuex 的简单使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
使用JS读秒使用示例
Sep 21 Javascript
JavaScript中实现异步编程模式的4种方法
Sep 24 Javascript
Javascript基础教程之函数对象和属性
Jan 18 Javascript
javascript实现十秒钟后注册按钮可点击的方法
May 13 Javascript
新手快速学习JavaScript免费教程资源汇总
Jun 25 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
May 05 Javascript
jquery tmpl模板(实例讲解)
Sep 02 jQuery
js canvas实现简单的图像扩散效果
Jun 28 Javascript
JS返回顶部实例代码
Aug 09 Javascript
微信小程序使用npm支持踩坑
Nov 07 Javascript
JavaScript的查询机制LHS和RHS解析
Aug 16 Javascript
如何基于原生javaScript生成带图片的二维码
Nov 21 Javascript
Vue.js中的computed工作原理
Mar 22 #Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
Mar 22 #Javascript
JS中的事件委托实例浅析
Mar 22 #Javascript
jquery的 filter()方法使用教程
Mar 22 #jQuery
p5.js实现斐波那契螺旋的示例代码
Mar 22 #Javascript
基于JavaScript实现幸运抽奖页面
Jul 05 #Javascript
Vue封装一个简单轻量的上传文件组件的示例
Mar 21 #Javascript
You might like
DOTA2 玩家自创拉野攻略 特色英雄快速成长篇
2020/04/20 DOTA
PHP脚本数据库功能详解(下)
2006/10/09 PHP
PHP中输出转义JavaScript代码的实现代码
2011/04/22 PHP
对象失去焦点时自己动提交数据的实现代码
2012/11/06 PHP
PHP中array_keys和array_unique函数源码的分析
2016/02/26 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
JQuery index()方法使用代码
2010/06/02 Javascript
JavaScript中使用Substring删除字符串最后一个字符
2013/11/03 Javascript
JS实现控制表格内指定单元格内容对齐的方法
2015/03/30 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
2015/08/04 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
2015/08/26 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
2021/02/25 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
2019/03/30 Javascript
JavaScript 类的封装操作示例详解
2020/05/16 Javascript
[02:34]DOTA2亚洲邀请赛 BG战队出场宣传片
2015/03/09 DOTA
[03:37]2016完美“圣”典 风云人物:Mikasa专访
2016/12/07 DOTA
python 七种邮件内容发送方法实例
2014/04/22 Python
Python新手实现2048小游戏
2015/03/31 Python
Python根据成绩分析系统浅析
2019/02/11 Python
详解如何用TensorFlow训练和识别/分类自定义图片
2019/08/05 Python
python实现对服务器脚本敏感信息的加密解密功能
2019/08/13 Python
Python代码生成视频的缩略图的实例讲解
2019/12/22 Python
NumPy统计函数的实现方法
2020/01/21 Python
Python使用socketServer包搭建简易服务器过程详解
2020/06/12 Python
python 绘制正态曲线的示例
2020/09/24 Python
HTML5应用之文件上传
2016/12/30 HTML / CSS
捷克原创男装和女装购物网站:Bolf.cz
2018/04/28 全球购物
两道JAVA笔试题
2016/09/14 面试题
探亲邀请信范文
2014/01/30 职场文书
房产继承公证书
2014/04/09 职场文书
读书活动总结
2014/04/28 职场文书
关于安全的广播稿
2014/10/23 职场文书
2014年幼儿园教师工作总结
2014/11/08 职场文书
详解CSS玩转图片Base64编码
2021/05/25 HTML / CSS
在Windows Server 2012上安装 .NET Framework 3.5 所遇到的问题
2022/04/29 Servers
SQL Server携程核心系统无感迁移到MySQL实战
2022/06/01 SQL Server