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的数字改变的动画效果--可用来做计数器
Aug 11 Javascript
用jquery与css打造个性化的单选框和复选框
Oct 20 Javascript
js中substring和substr的定义和用法
May 05 Javascript
深入学习jQuery Validate表单验证
Jan 18 Javascript
js遍历json的key和value的实例
Jan 22 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
Aug 18 Javascript
vue-resouce设置请求头的三种方法
Sep 12 Javascript
微信小程序scroll-x失效的完美解决方法
Jul 18 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
Jul 31 Javascript
js实现图片上传到服务器和回显
Jan 19 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
vue项目支付功能代码详解
Feb 18 Vue.js
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函数)
2006/10/09 PHP
PHP 事务处理数据实现代码
2010/05/13 PHP
php操作JSON格式数据的实现代码
2011/12/24 PHP
CI框架源码解读之URI.php中_fetch_uri_string()函数用法分析
2016/05/18 PHP
PHP 表单提交及处理表单数据详解及实例
2016/12/27 PHP
PHP面向对象程序设计模拟一般面向对象语言中的方法重载(overload)示例
2019/06/13 PHP
JavaScript入门教程(8) Location地址对象
2009/01/31 Javascript
javascript 的Document属性和方法集合
2010/01/25 Javascript
推荐10个超棒的jQuery工具提示插件
2011/10/11 Javascript
图片动画横条广告带上下滚动的JS代码
2013/10/25 Javascript
jquery判断元素的子元素是否存在的示例代码
2014/02/04 Javascript
js动态控制table的tr、td增加及删除的具体实现
2014/04/30 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
2016/04/14 Javascript
JS中sort函数排序用法实例分析
2016/06/16 Javascript
浅谈js中字符和数组一些基本算法题
2016/08/15 Javascript
jquery dataview数据视图插件使用方法
2016/12/23 Javascript
JavaScript 基础表单验证示例(纯Js实现)
2017/07/20 Javascript
关于webpack代码拆分的解析
2017/07/20 Javascript
vue学习教程之带你一步步详细解析vue-cli
2017/12/26 Javascript
el-table表头根据内容自适应完美解决表头错位和固定列错位
2021/01/07 Javascript
[10:21]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster 选手采访
2021/03/11 DOTA
Python基于Socket实现的简单聊天程序示例
2017/08/05 Python
python+pandas生成指定日期和重采样的方法
2018/04/11 Python
python 获取sqlite3数据库的表名和表字段名的实例
2019/07/17 Python
python实现机器人卡牌
2019/10/06 Python
python实现名片管理器的示例代码
2019/12/17 Python
浅谈Python3实现两个矩形的交并比(IoU)
2020/01/18 Python
pycharm激活码快速激活及使用步骤
2020/03/12 Python
Python检测端口IP字符串是否合法
2020/06/05 Python
input file上传文件样式支持html5的浏览器解决方案
2012/11/14 HTML / CSS
捷克家电和家具购物网站:OKAY.cz
2020/07/23 全球购物
如何进行有效的自我评价
2013/09/27 职场文书
物业公司采购员岗位职责
2013/12/31 职场文书
难忘的一课教学反思
2014/04/30 职场文书
2017年大学生寒假社会实践活动总结
2016/04/06 职场文书
手把手教你用SpringBoot将文件打包成zip存放或导出
2021/06/11 Java/Android