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源码分析之Event事件分析
Jun 07 Javascript
js动态设置鼠标事件示例代码
Oct 30 Javascript
node.js中的fs.readlink方法使用说明
Dec 17 Javascript
js实现有时间限制消失的图片方法
Feb 27 Javascript
JavaScript数据库TaffyDB用法实例分析
Jul 27 Javascript
jquery+ajax实现注册实时验证实例详解
Dec 08 Javascript
jQuery实现日期联动效果实例
Jul 26 Javascript
基于jQuery封装的分页组件
Jun 26 jQuery
JS温故而知新之变量提升和时间死区
Jan 27 Javascript
解决vue单页面修改样式无法覆盖问题
Aug 05 Javascript
刷新页面后让控制台的js代码继续执行
Sep 20 Javascript
vue.js实现左边导航切换右边内容
Oct 21 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
破解.net程序(dll文件)编译和反编译方法
2013/01/31 PHP
php之Smarty模板使用方法示例详解
2014/07/08 PHP
PHP number_format函数原理及实例解析
2020/07/14 PHP
xmlHTTP实例
2006/10/24 Javascript
ExtJs Excel导出并下载IIS服务器端遇到的问题
2011/09/16 Javascript
js字母大小写转换实现方法总结
2013/11/13 Javascript
iframe窗口高度自适应的实现方法
2014/01/08 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
2014/05/10 Javascript
JavaScript显示当前文档最后修改日期的方法
2015/03/19 Javascript
Javascript变量的作用域和作用域链详解
2015/04/02 Javascript
基于socket.io+express实现多房间聊天
2016/03/17 Javascript
js带闹铃功能的倒计时代码
2016/09/29 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
2017/05/02 Javascript
web页面和微信小程序页面实现瀑布流效果
2018/09/26 Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
2019/09/27 Javascript
vue-property-decorator用法详解
2019/12/12 Javascript
Python使用cx_Oracle模块将oracle中数据导出到csv文件的方法
2015/05/16 Python
Python学习pygal绘制线图代码分享
2017/12/09 Python
Python实现定时备份mysql数据库并把备份数据库邮件发送
2018/03/08 Python
Python实现多线程的两种方式分析
2018/08/29 Python
使用Python实现在Windows下安装Django
2018/10/17 Python
Python3字符串encode与decode的讲解
2019/04/02 Python
Python3.6实现带有简单界面的有道翻译小程序
2019/04/16 Python
使用Python内置模块与函数进行不同进制的数的转换
2020/04/26 Python
python中return如何写
2020/06/18 Python
英国时尚家具、家居饰品及礼品商店:Graham & Green
2016/09/15 全球购物
Java程序员面试题
2016/09/27 面试题
德尔福集团DELPHI的笔试题
2012/02/22 面试题
工厂厂长的职责
2013/12/12 职场文书
大二法学专业职业生涯规划范文
2014/02/12 职场文书
幼儿教师研修感言
2014/02/12 职场文书
办公室主任职责范本
2014/03/07 职场文书
安全生产责任书范本
2014/04/15 职场文书
选秀节目策划方案
2014/06/06 职场文书
政府法律服务方案
2014/06/14 职场文书
JS中一些高效的魔法运算符总结
2021/05/06 Javascript