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 相关文章推荐
BOM与DOM的区别分析
Oct 26 Javascript
TextArea设置MaxLength属性最大输入值的js代码
Dec 21 Javascript
jquery 获取dom固定元素 添加样式的简单实例
Feb 04 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
Oct 10 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
Dec 27 Javascript
JS库之wow.js使用方法
Sep 14 Javascript
Vue组件之Tooltip的示例代码
Oct 18 Javascript
尝试自己动手用react来写一个分页组件(小结)
Feb 09 Javascript
详解Vue中watch的高级用法
May 02 Javascript
详解搭建es6+devServer简单开发环境
Sep 25 Javascript
vue 左滑删除功能的示例代码
Jan 28 Javascript
layui表格数据重载
Jul 27 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
Http 1.1 Etag 与 Last-Modified提高php效率
2008/01/10 PHP
PHP 生成的XML以FLASH获取为乱码终极解决
2009/08/07 PHP
php中0,null,empty,空,false,字符串关系的详细介绍
2013/06/20 PHP
win平台安装配置Nginx+php+mysql 环境
2016/01/12 PHP
php结合web uploader插件实现分片上传文件
2016/05/10 PHP
兼容FireFox 的 js 日历 支持时间的获取
2009/03/04 Javascript
几个有趣的Javascript Hack
2010/07/24 Javascript
javascript基于HTML5 canvas制作画箭头组件
2014/06/25 Javascript
jQuery实现统计复选框选中数量
2014/11/24 Javascript
JavaScript中的数值范围介绍
2014/12/29 Javascript
Js与Jq获取浏览器和对象值的方法
2016/03/18 Javascript
jQuery文字横向滚动效果的实现代码
2016/05/31 Javascript
javascript之Array 数组对象详解
2016/06/07 Javascript
Javascript 两种刷新方法以及区别和适用范围
2017/01/17 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
2017/12/12 Javascript
vue下拉列表功能实例代码
2018/04/08 Javascript
js实现九宫格抽奖
2020/03/19 Javascript
[01:39:04]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第二场 2月1日
2021/03/11 DOTA
python生成不重复随机数和对list乱序的解决方法
2018/04/09 Python
centos6.5安装python3.7.1之后无法使用pip的解决方案
2019/02/14 Python
Pycharm如何打断点的方法步骤
2019/06/13 Python
Django框架教程之中间件MiddleWare浅析
2019/12/29 Python
selenium学习教程之定位以及切换frame(iframe)
2021/01/04 Python
基于CSS3实现图片模糊过滤效果
2015/11/19 HTML / CSS
全面解析HTML5中的标准属性与自定义属性
2016/02/18 HTML / CSS
西班牙太阳镜品牌:Hawkers
2018/03/11 全球购物
英国医生在线预约:Top Doctors
2019/10/30 全球购物
俄罗斯香水在线商店:AromaCode
2019/12/04 全球购物
网络编辑岗位职责范本
2014/02/10 职场文书
应届毕业生自荐信
2014/05/28 职场文书
2014旅游局领导班子四风问题对照检查材料思想汇报
2014/09/19 职场文书
中学生检讨书范文
2014/11/03 职场文书
优秀共产党员推荐材料
2014/12/18 职场文书
自荐信模板大全
2015/03/27 职场文书
2019通用版劳动合同范本!
2019/07/11 职场文书
致创业您:正能量激励人心句子(48条)
2019/08/15 职场文书