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 SocialHistory 检查访问者是否访问过某站点
Aug 02 Javascript
jQuery下拉框的简单应用
Jun 24 Javascript
关于JSON与JSONP简单总结
Aug 16 Javascript
js放大镜放大购物图片效果
Jan 18 Javascript
javascript实现多张图片左右无缝滚动效果
Mar 22 Javascript
React Navigation 使用中遇到的问题小结
May 08 Javascript
Javascript实现动态时钟效果
Nov 17 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
May 12 Javascript
vue将后台数据时间戳转换成日期格式
Jul 31 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
Vue 打包的静态文件不能直接运行的原因及解决办法
Nov 19 Vue.js
js实现弹框效果
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
一个简单的域名注册情况查询程序
2006/10/09 PHP
php+AJAX传送中文会导致乱码的问题的解决方法
2008/09/08 PHP
PHP获取一年中每个星期的开始和结束日期的方法
2015/02/12 PHP
js cookies 常见网页木马挂马代码 24小时只加载一次
2009/04/13 Javascript
基于jquery的blockui插件显示弹出层
2011/04/14 Javascript
javascript中的void运算符语法及使用介绍
2013/03/10 Javascript
js控制的遮罩层实例介绍
2013/05/29 Javascript
jquery给图片添加鼠标经过时的边框效果
2013/11/12 Javascript
使用不同的方法结合/合并两个JS数组
2014/09/18 Javascript
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
2014/11/19 Javascript
jQuery实现点击小图显示大图代码分享
2015/08/25 Javascript
用户代理字符串userAgent可实现的四个识别
2015/09/20 Javascript
JavaScript必知必会(十) call apply bind的用法说明
2016/06/08 Javascript
javascript中神奇的 Date对象小结
2017/10/12 Javascript
layui中layer前端组件实现图片显示功能的方法分析
2017/10/13 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
2019/01/06 Javascript
简单分析js中的this的原理
2019/08/31 Javascript
JavaScript对象访问器Getter及Setter原理解析
2020/12/08 Javascript
nodejs中使用worker_threads来创建新的线程的方法
2021/01/22 NodeJs
批处理与python代码混合编程的方法
2016/05/19 Python
Python冲顶大会 快来答题!
2018/01/17 Python
PyQt5每天必学之事件与信号
2018/04/20 Python
简单瞅瞅Python vars()内置函数的实现
2019/09/27 Python
Python 实现打印单词的菱形字符图案
2020/04/12 Python
使用Keras预训练好的模型进行目标类别预测详解
2020/06/27 Python
Elasticsearch py客户端库安装及使用方法解析
2020/09/14 Python
详解Python中Pyyaml模块的使用
2020/10/08 Python
如何使用Pytorch搭建模型
2020/10/26 Python
html5 学习简单的拾色器
2010/09/03 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
2018/01/31 HTML / CSS
初中班主任评语
2014/04/24 职场文书
2014年行政执法工作总结
2014/12/11 职场文书
2015年科室工作总结
2015/04/10 职场文书
2015年幼儿教育工作总结
2015/07/24 职场文书
Spring Security中用JWT退出登录时遇到的坑
2021/10/16 Java/Android
python实现局部图像放大
2021/11/17 Python