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下获取div中的数据的原理分析
Apr 07 Javascript
extjs之去除s.gif的影响
Dec 25 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
Jan 20 Javascript
JS判断两个时间大小的示例代码
Jan 28 Javascript
javascript实现无缝上下滚动特效
Dec 16 Javascript
js实现楼层效果的简单实例
Jul 15 Javascript
浅谈angularjs $http提交数据探索
Jan 20 Javascript
详解vue.js2.0父组件点击触发子组件方法
May 10 Javascript
详解Javascript获取缓存和清除缓存API
May 25 Javascript
EasyUI实现下拉框多选功能
Nov 07 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
May 05 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
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
解析array splice的移除数组中指定键的值,返回一个新的数组
2013/07/02 PHP
如何写php守护进程(Daemon)
2015/12/30 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
PHP文件后缀不强制为.php方法
2019/03/31 PHP
使用swoole 定时器变更超时未支付订单状态的解决方案
2019/07/24 PHP
JQuery 插件制作实践 xMarquee插件V1.0
2010/04/02 Javascript
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
2010/11/23 Javascript
javascript校验价格合法性实例(必须输入2位小数)
2014/05/05 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
2014/08/15 Javascript
jQuery中find()方法用法实例
2015/01/07 Javascript
JavaScript动态提示输入框输入字数的方法
2015/07/27 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
2016/03/24 Javascript
jquery实现简单的banner轮播效果【实例】
2016/03/30 Javascript
简单实现jQuery手风琴效果
2017/08/18 jQuery
Angular中使用MathJax遇到的一些问题
2017/12/15 Javascript
Vue2.0 事件的广播与接收(观察者模式)
2018/03/14 Javascript
微信小程序分享海报生成的实现方法
2018/12/10 Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
2019/04/02 Javascript
实例分析javascript中的异步
2020/06/02 Javascript
python去掉字符串中重复字符的方法
2014/02/27 Python
python k-近邻算法实例分享
2014/06/11 Python
详解Python给照片换底色(蓝底换红底)
2019/03/22 Python
Python操作列表常用方法实例小结【创建、遍历、统计、切片等】
2019/10/25 Python
pytorch 获取tensor维度信息示例
2020/01/03 Python
Tensorflow的常用矩阵生成方式
2020/01/04 Python
CSS3的文字阴影—text-shadow的使用方法
2012/12/25 HTML / CSS
印度购物网站:TATA CLiQ
2017/11/23 全球购物
澳大利亚运动鞋零售商:The Athlete’s Foot
2018/11/04 全球购物
全国优秀辅导员事迹材料
2014/05/14 职场文书
校庆标语集锦
2014/06/25 职场文书
卖车协议书范例
2014/09/16 职场文书
大学军训的体会
2014/11/08 职场文书
原告离婚代理词
2015/05/23 职场文书
教师个人工作总结范文2015
2015/10/14 职场文书
2016年教师节感言
2015/12/09 职场文书
Windows11里微软已经将驱动程序安装位置A盘删除
2021/11/21 数码科技