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 相关文章推荐
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
Jun 28 Javascript
js substr支持中文截取函数代码(中文是双字节)
Apr 17 Javascript
防止按钮在短时间内被多次点击的方法
Mar 10 Javascript
json+jQuery实现的无限级树形菜单效果代码
Aug 27 Javascript
JavaScript ParseFloat()方法
Dec 18 Javascript
论Bootstrap3和Foundation5网格系统的异同
May 16 Javascript
javascript设计模式之单体模式学习笔记
Feb 15 Javascript
Angular模版驱动表单的使用总结
May 05 Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
Aug 28 Javascript
对angular4子路由&辅助路由详解
Oct 09 Javascript
微信小程序实现手势滑动卡片效果
Aug 26 Javascript
vuex存储token示例
Nov 11 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
php中定义网站根目录的常用方法
2010/08/08 PHP
深入解析yii权限分级式访问控制的实现(非RBAC法)
2013/06/13 PHP
Zend Framework页面缓存实例
2014/06/25 PHP
用JTrackBar实现的模拟苹果风格的滚动条
2007/08/06 Javascript
Firebug入门指南(Firefox浏览器)
2010/08/21 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
2015/03/04 Javascript
vue.js入门教程之绑定class和style样式
2016/09/02 Javascript
利用百度地图API获取当前位置信息的实例
2017/11/06 Javascript
详解.vue文件中style标签的几个标识符
2018/07/17 Javascript
element-ui 设置菜单栏展开的方法
2018/08/22 Javascript
JS使用对象的defineProperty进行变量监控操作示例
2019/02/02 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
2019/11/01 jQuery
JS document对象简单用法完整示例
2020/01/14 Javascript
[02:52]2014DOTA2西雅图国际邀请赛 CIS战队巡礼
2014/07/07 DOTA
[01:46]2020完美世界全国高校联赛秋季赛报名开启
2020/10/15 DOTA
Python写的英文字符大小写转换代码示例
2015/03/06 Python
Python3使用PyQt5制作简单的画板/手写板实例
2017/10/19 Python
SVM基本概念及Python实现代码
2017/12/27 Python
浅谈pandas中shift和diff函数关系
2018/04/08 Python
Python测试网络连通性示例【基于ping】
2018/08/03 Python
学习Django知识点分享
2019/09/11 Python
python 实现return返回多个值
2019/11/19 Python
python实现快递价格查询系统
2020/03/03 Python
Python基于httpx模块实现发送请求
2020/07/07 Python
Python压缩模块zipfile实现原理及用法解析
2020/08/14 Python
python 代码运行时间获取方式详解
2020/09/18 Python
利用Python发送邮件或发带附件的邮件
2020/11/12 Python
CSS3 实用技巧:实现黑白图像效果示例代码
2013/07/11 HTML / CSS
CSS3制作酷炫的条纹背景
2017/11/09 HTML / CSS
CSS3 @keyframes简单动画实现
2018/02/24 HTML / CSS
班级聚会策划书
2014/01/16 职场文书
大学生翘课检讨书范文
2014/10/06 职场文书
对党的十八届四中全会的期盼
2014/10/17 职场文书
商务考察邀请函模板
2015/02/02 职场文书
pycharm2021激活码使用教程(永久激活亲测可用)
2021/03/30 Python
Spring整合Mybatis的全过程
2021/06/28 Java/Android