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 相关文章推荐
javascript学习笔记(三) String 字符串类型介绍
Jun 19 Javascript
jQuery scroll事件实现监控滚动条分页示例
Apr 04 Javascript
js清空form表单中的内容示例
May 20 Javascript
JavaScript获得指定对象大小的方法
Jul 01 Javascript
基于jQuery实现搜索关键字自动匹配功能
Mar 26 Javascript
JavaScript File分段上传
Mar 10 Javascript
jQuery事件对象总结
Oct 17 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
Jan 12 Javascript
bootstrap按钮插件(Button)使用方法解析
Jan 13 Javascript
Angular实现下拉框模糊查询功能示例
Jan 03 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
Sep 18 Javascript
JavaScript流程控制(循环)
Dec 06 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遍历二维数组的代码
2011/04/22 PHP
php防止站外远程提交表单的方法
2014/10/20 PHP
PHP判断IP并转跳到相应城市分站的方法
2015/03/25 PHP
php调整服务器时间的方法
2015/04/03 PHP
浅谈Laravel中的一个后期静态绑定
2017/08/11 PHP
Javascript 面向对象 继承
2010/05/13 Javascript
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
2010/06/30 Javascript
基于jquery实现的可以编辑选择的下拉框的代码
2010/11/19 Javascript
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
2012/01/13 Javascript
20行代码实现的一个CSS覆盖率测试脚本
2013/07/07 Javascript
HTTP 304错误的详细讲解
2013/11/13 Javascript
jquery实现页面图片等比例放大缩小功能
2014/02/12 Javascript
javascript框架设计读书笔记之模块加载系统
2014/12/02 Javascript
javascript数组去重方法汇总
2015/04/23 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
2015/05/06 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
2015/08/26 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
2016/01/04 Javascript
jqueryMobile使用示例分享
2016/01/12 Javascript
学习JavaScript设计模式之观察者模式
2020/04/22 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
2016/03/31 Javascript
如何在JS中实现相互转换XML和JSON
2016/07/19 Javascript
JavaScript中的对象和原型(一)
2016/08/12 Javascript
AngularJS中isolate scope的用法分析
2016/11/22 Javascript
详解react如何在组件中获取路由参数
2017/06/15 Javascript
vue动态删除从数据库倒入列表的某一条方法
2018/09/29 Javascript
JS使用Dijkstra算法求解最短路径
2019/01/17 Javascript
[03:48]大碗DOTA
2019/07/25 DOTA
python中的列表推导浅析
2014/04/26 Python
Python中遍历字典过程中更改元素导致异常的解决方法
2016/05/12 Python
python用户管理系统
2018/03/13 Python
Python读取英文文件并记录每个单词出现次数后降序输出示例
2018/06/28 Python
利用CSS3的特性改变文本选中时的颜色
2013/09/11 HTML / CSS
美国高档百货Nordstrom的折扣店:Nordstrom Rack
2017/11/13 全球购物
纪伊国屋新加坡网上书店:Kinokuniya新加坡
2017/12/29 全球购物
建筑工程催款函
2015/06/24 职场文书
使用Redis做预定库存缓存功能
2022/04/02 Redis