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 原型与继承说明
Jun 09 Javascript
js 判断checkbox是否选中的操作方法
Nov 09 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
Oct 25 Javascript
详解Matlab中 sort 函数用法
Mar 20 Javascript
基于jQuery制作小图标上下滑动特效
Jan 18 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
Nov 02 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
Dec 29 Javascript
详解基于vue-cli3快速发布一个fullpage组件
Mar 08 Javascript
js cavans实现静态滚动弹幕
May 21 Javascript
js实现九宫格布局效果
May 28 Javascript
vue前端工程的搭建
Mar 31 Vue.js
JavaScript实例 ODO List分析
Jan 22 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
简单谈谈favicon
2015/06/10 PHP
PHP操作FTP类 (上传、下载、移动、创建等)
2016/03/31 PHP
thinkphp多表查询两表有重复相同字段的完美解决方法
2016/09/22 PHP
PHP生成图片缩略图类示例
2017/01/12 PHP
《JavaScript高级程序设计》阅读笔记(二) ECMAScript中的原始类型
2012/02/27 Javascript
对js关键字命名的疑问介绍
2014/04/25 Javascript
JS解析XML文件和XML字符串详解
2015/04/17 Javascript
极易被忽视的javascript面试题七问七答
2016/02/15 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
js实现移动端编辑添加地址【模仿京东】
2017/04/28 Javascript
基于angular实现三级联动的生日插件
2017/05/12 Javascript
浅谈在vue项目中如何定义全局变量和全局函数
2017/10/24 Javascript
浅谈Webpack 是如何加载模块的
2018/05/24 Javascript
关于vue编译版本引入的问题的解决
2018/09/17 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
2018/11/08 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
2019/04/17 Javascript
微信小程序设置滚动条过程详解
2019/07/25 Javascript
vue点击按钮动态创建与删除组件功能
2019/12/29 Javascript
vue项目中监听手机物理返回键的实现
2020/01/18 Javascript
JS通过识别id、value值对checkbox设置选中状态
2020/02/19 Javascript
Python实现从百度API获取天气的方法
2015/03/11 Python
Python多继承原理与用法示例
2018/08/23 Python
Django框架的中的setting.py文件说明详解
2018/10/15 Python
Python3 sys.argv[ ]用法详解
2019/10/24 Python
Python测试Kafka集群(pykafka)实例
2019/12/23 Python
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
2015/04/24 HTML / CSS
班训口号大全
2014/06/18 职场文书
语文课外活动总结
2014/08/27 职场文书
交通事故协议书范文
2014/10/23 职场文书
工作业绩不及格检讨书
2014/10/28 职场文书
交警正风肃纪剖析材料
2014/10/29 职场文书
2014财务部年度工作总结
2014/12/08 职场文书
2015年人事工作总结范文
2015/04/09 职场文书
Redis实现订单自动过期功能的示例代码
2021/05/08 Redis
如何用RabbitMQ和Swoole实现一个异步任务系统
2021/05/29 PHP
vue项目proxyTable配置和部署服务器
2022/04/14 Vue.js