vuex的简单使用教程


Posted in Javascript onFebruary 02, 2018

什么是Vuex?

vuex是一个专门为vue.js设计的集中式状态管理架构。状态?我把它理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态。简单的说就是data中需要共用的属性。

使用vuex进行组件间数据的管理

npm i vuex -S

main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store.js'

new Vue({
 store,
 el: '#app',
 render: h => h(App)
})

store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 这里定义初始值
let state = {
 count:10
};
const mutations = {
 add(context){
  context.count++
 },
 decrease(context){
  context.count--
 }
};
// 事件触发后的逻辑操作
// 参数为事件函数
const actions = {
 add(add){
  add.commit('add')
 },
 decrease(decrease){
  decrease.commit('decrease')
 },
 oddAdd({commit,state}){
  if (state.count % 2 === 0) {
   commit('add')
  }
 }
};
// 返回改变后的数值
const getters = {
 count(context){
  return context.count
 },
 getOdd(context) {
  return context.count % 2 === 0 ? '偶数' : '奇数'
 }
};
export default new Vuex.Store({
 state,
 mutations,
 actions,
 getters
})

App.vue

<template>
 <div id="app">
 <button @click="add">add</button>
 <button @click="decrease">decrease</button>
 <button @click="oddAdd">oddAdd</button>
 <div>{{count}}</div>
 <div>{{getOdd}}</div>
 </div>
</template>
<script>
import {mapGetters,mapActions} from 'vuex'
 export default {
  // 得到计算后的值
  computed:mapGetters(['count','getOdd']),
  // 发生点击事件触发不同函数
  methods:mapActions(['add','decrease','oddAdd'])
 }
</script>

vuex的简单使用教程

GitHub: https://github.com/wmui

总结

以上所述是小编给大家介绍的vuex的简单使用教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript编程起步(第四课)
Jan 10 Javascript
Prototype 学习 工具函数学习($A方法)
Jul 12 Javascript
JavaScript实现添加及删除事件的方法小结
Aug 04 Javascript
每天一篇javascript学习小结(Function对象)
Nov 16 Javascript
JavaScript事件 &quot;事件对象&quot;的注意要点
Jan 14 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
Dec 13 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
Mar 09 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
May 08 Javascript
让你彻底掌握es6 Promise的八段代码
Jul 26 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
Aug 14 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
Nov 07 Javascript
JavaScript使用ul中li标签实现删除效果
Apr 15 Javascript
详解VueJS应用中管理用户权限
Feb 02 #Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
Feb 02 #Javascript
使用express+multer实现node中的图片上传功能
Feb 02 #Javascript
Vue多种方法实现表头和首列固定的示例代码
Feb 02 #Javascript
jquery.picsign图片标注组件实例详解
Feb 02 #jQuery
使用webpack打包koa2 框架app
Feb 02 #Javascript
Vue组件化开发思考
Feb 02 #Javascript
You might like
PHP设计聊天室步步通
2006/10/09 PHP
php htmlentities和htmlspecialchars 的区别
2008/08/18 PHP
WampServer下安装多个版本的PHP、mysql、apache图文教程
2015/01/07 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
PHP序列化的四种实现方法与横向对比
2018/11/29 PHP
在页面上点击任一链接时触发一个事件的代码
2007/04/07 Javascript
用js实现随机返回数组的一个元素
2007/08/13 Javascript
解决IE6的PNG透明JS插件使用介绍
2013/04/17 Javascript
js和jquery设置disabled属性为true使按钮失效
2014/08/07 Javascript
jquery实现的横向二级导航效果代码
2015/08/26 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
2015/09/09 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
2016/01/19 Javascript
理解JS绑定事件
2016/01/19 Javascript
js实现碰撞检测特效代码分享
2016/10/16 Javascript
微信小程序 教程之列表渲染
2016/10/18 Javascript
JS实现淡入淡出图片效果的方法分析
2016/12/20 Javascript
关于vuex的学习实践笔记
2017/04/05 Javascript
DVA框架统一处理所有页面的loading状态
2017/08/25 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
2018/05/04 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
2018/11/08 Javascript
实用的Vue开发技巧
2019/05/30 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
2019/09/06 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
2020/07/19 Javascript
Vue如何实现验证码输入交互
2020/12/07 Vue.js
玩转python爬虫之URLError异常处理
2016/02/17 Python
python 用正则表达式筛选文本信息的实例
2018/06/05 Python
Django form表单与请求的生命周期步骤详解
2020/06/07 Python
canvas使用注意点总结
2013/07/19 HTML / CSS
Qoo10马来西亚:全球时尚和引领潮流的购物市场
2016/08/25 全球购物
世界上第一个创建了罩杯系统的美国内衣品牌:Maidenform
2019/03/23 全球购物
全球性的女装店:storets
2019/06/12 全球购物
品恩科技软件测试面试题
2014/10/26 面试题
工作失职检讨书500字
2014/10/17 职场文书
民用住房租房协议书
2014/10/29 职场文书
煤矿安全生产工作总结
2015/08/13 职场文书
Python中使用Opencv开发停车位计数器功能
2022/04/04 Python