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 相关文章推荐
Google AJAX 搜索 API实现代码
Nov 17 Javascript
JQuery 常用方法和事件详细介绍
Apr 18 Javascript
Json序列化和反序列化方法解析
Dec 19 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
May 05 Javascript
javascript中HTMLDOM操作详解
Dec 11 Javascript
javascript自动生成包含数字与字符的随机字符串
Feb 09 Javascript
javascript实现信息增删改查的方法
Jul 25 Javascript
jQuery实现类似老虎机滚动抽奖效果
Aug 06 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
Mar 09 Javascript
Angular4 中内置指令的基本用法
Jul 31 Javascript
移动端效果之IndexList详解
Oct 20 Javascript
微信小程序实现简易table表格
Jun 19 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
咖啡知识大全
2021/03/03 新手入门
网站当前的在线人数
2006/10/09 PHP
PHP中基本符号及使用方法
2010/03/23 PHP
PHP删除特定数组内容并且重建数组索引的方法.
2011/03/25 PHP
非常好用的Zend Framework分页类
2014/06/25 PHP
PHP全局变量与超级全局变量区别分析
2016/04/01 PHP
PHP时间处理类操作示例
2018/09/05 PHP
centos7上编译安装php7以php-fpm方式连接apache
2018/11/08 PHP
基于jQuery捕获超链接事件进行局部刷新代码
2012/05/10 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
2014/07/18 Javascript
jQuery 获取页面li数组并删除不在数组中的key
2016/08/02 Javascript
Angular.Js的自动化测试详解
2016/12/09 Javascript
老生常谈angularjs中的$state.go
2017/04/24 Javascript
JS跳转手机站url的若干注意事项
2017/10/18 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
2017/10/18 Javascript
使用DataTable插件实现异步加载数据
2017/11/19 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
2017/12/07 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
2018/01/09 Javascript
关于vue编译版本引入的问题的解决
2018/09/17 Javascript
Vue中的基础过渡动画及实现原理解析
2018/12/04 Javascript
基于Electron实现桌面应用开发代码实例
2020/07/07 Javascript
Ruby使用eventmachine为HTTP服务器添加文件下载功能
2016/04/20 Python
Python实现的下载网页源码功能示例
2017/06/13 Python
Python进阶学习之特殊方法实例详析
2017/12/01 Python
使用memory_profiler监测python代码运行时内存消耗方法
2018/12/03 Python
python七夕浪漫表白源码
2019/04/05 Python
Python 寻找局部最高点的实现
2019/12/05 Python
appium+python adb常用命令分享
2020/03/06 Python
Python中关于logging模块的学习笔记
2020/06/03 Python
纯css3实现鼠标经过图片显示描述的动画效果
2014/09/01 HTML / CSS
Pretty Green美国:英式摇滚服饰风格代表品牌之一
2019/01/23 全球购物
Java方面的关于数组和继承的笔面试题
2015/09/18 面试题
教师实习期自我鉴定
2013/10/06 职场文书
入党申请自荐书范文
2014/02/11 职场文书
春节请假条
2014/04/11 职场文书
2014年世界艾滋病日演讲稿
2014/11/28 职场文书