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 元素相对定位代码
Oct 15 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
Apr 26 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
Nov 12 Javascript
js实现遮罩层划出效果是生成div而不是显示
Jul 29 Javascript
JavaScript中字符串(string)转json的2种方法
Jun 25 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
Nov 01 Javascript
对vue.js中this.$emit的深入理解
Feb 23 Javascript
vue项目刷新当前页面的三种方法
Dec 04 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
Sep 03 Javascript
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
vue中移动端调取本地的复制的文本方式
Jul 18 Javascript
什么是SOLID
Mar 24 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
php数组遍历类与用法示例
2019/05/24 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
jQuery入门问答 整理的几个常见的初学者问题
2010/02/22 Javascript
yepnope.js 异步加载资源文件
2011/09/08 Javascript
jquery中使用循环下拉菜单示例代码
2014/09/24 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
2016/06/17 Javascript
解决给dom元素绑定click等事件无效问题的方法
2017/02/17 Javascript
收藏AngularJS中最重要的核心功能
2017/07/09 Javascript
记录一篇关于redux-saga的基本使用过程
2018/08/18 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
2019/11/14 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
2019/12/23 Javascript
[45:46]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS DT
2014/05/23 DOTA
python实现随机密码字典生成器示例
2014/04/09 Python
python中使用enumerate函数遍历元素实例
2014/06/16 Python
python实现查询苹果手机维修进度
2015/03/16 Python
python处理大数字的方法
2015/05/27 Python
Python中内置的日志模块logging用法详解
2016/07/12 Python
动感网页相册 python编写简单文件夹内图片浏览工具
2016/08/17 Python
python通过cookie模拟已登录状态的初步研究
2016/11/09 Python
Python实现的redis分布式锁功能示例
2018/05/29 Python
Python+opencv 实现图片文字的分割的方法示例
2019/07/04 Python
pycharm新建一个python工程步骤
2019/07/16 Python
PyInstaller将Python文件打包为exe后如何反编译(破解源码)以及防止反编译
2020/04/15 Python
Python实现Word表格转成Excel表格的示例代码
2020/04/16 Python
Android Q之气泡弹窗的实现示例
2020/06/23 Python
Python实现七个基本算法的实例代码
2020/10/08 Python
python 获取计算机的网卡信息
2021/02/18 Python
英国第一的购买便宜玩具和游戏的在线购物网站:Bargain Max
2018/01/24 全球购物
外科实习自我鉴定
2013/10/06 职场文书
旅游市场营销方案
2014/03/09 职场文书
婚礼证婚人演讲稿
2014/09/13 职场文书
求职自我推荐信
2015/03/24 职场文书
合理缓解职场压力,让你随时保持最佳状态!
2019/06/21 职场文书
一文了解JavaScript用Element Traversal新属性遍历子元素
2021/11/27 Javascript
面试官问我Mysql的存储引擎了解多少
2022/08/05 MySQL
MySQL一劳永逸永久支持输入中文的方法实例
2022/08/05 MySQL