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 替换
Feb 19 Javascript
利用jq让你的div居中的好方法分享
Nov 21 Javascript
jquery动态添加元素事件失效问题解决方法
May 23 Javascript
jQuery 删除或是清空某个HTML元素示例
Aug 04 Javascript
js实现文章文字大小字号功能完整实例
Nov 01 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
Dec 16 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
Dec 18 Javascript
jQuery实现日期联动效果实例
Jul 26 Javascript
JS获取url参数、主域名的方法实例分析
Aug 03 Javascript
bootstrap suggest下拉框使用详解
Apr 10 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
Jan 24 Javascript
基于jQuery实现可编辑的表格
Dec 11 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
mysql建立外键
2006/11/25 PHP
分享PHP入门的学习方法
2007/01/02 PHP
php htmlspecialchars加强版
2010/02/16 PHP
php控制linux服务器常用功能 关机 重启 开新站点等
2012/09/05 PHP
PHP 文件编程综合案例-文件上传的实现
2013/07/03 PHP
ThinkPHP3.1查询语言详解
2014/06/19 PHP
php简单实现sql防注入的方法
2016/04/22 PHP
php json_encode与json_decode详解及实例
2016/12/13 PHP
使用js如何实现全选与全不选
2013/12/30 Javascript
JAVA四种基本排序方法实例总结
2015/07/24 Javascript
纯javascript代码实现计算器功能(三种方法)
2015/09/07 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
2016/06/17 Javascript
JS实现根据文件字节数返回文件大小的方法
2016/08/02 Javascript
浅谈jquery的html方法里包含特殊字符的处理
2016/11/30 Javascript
javascript 中的继承实例详解
2017/05/05 Javascript
微信小程序本地缓存数据增删改查实例详解
2017/05/24 Javascript
详解js访问对象的属性和方法
2018/10/25 Javascript
python实现简单图书管理系统
2019/11/22 Python
python dataframe NaN处理方式
2019/12/26 Python
Python tkinter模版代码实例
2020/02/05 Python
简单了解python列表和元组的区别
2020/05/14 Python
Python远程方法调用实现过程解析
2020/07/28 Python
python 实现aes256加密
2020/11/27 Python
Python爬虫之Selenium中frame/iframe表单嵌套页面
2020/12/04 Python
CSS3轻松实现圆角效果
2017/11/09 HTML / CSS
Cinque网上商店:德国服装品牌
2019/03/17 全球购物
施华洛世奇匈牙利官网:SWAROVSKI匈牙利
2019/07/06 全球购物
运动鞋、足球鞋和慕尼黑球衣:Sport Münzinger
2019/08/26 全球购物
程序员机试试题汇总
2012/03/07 面试题
什么是网络协议
2016/04/07 面试题
优秀士兵个人事迹材料
2014/01/19 职场文书
广播体操口号
2014/06/18 职场文书
2014最新自愿离婚协议书范本
2014/11/19 职场文书
单位婚育证明范本
2014/11/21 职场文书
青年文明号申报材料
2014/12/23 职场文书
2015年度对口支援工作总结
2015/07/22 职场文书