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 去除数组的重复元素
May 04 Javascript
javascript利用apply和arguments复用方法
Nov 25 Javascript
js 数值转换为3位逗号分隔的示例代码
Feb 19 Javascript
js使用DOM操作实现简单留言板的方法
Apr 10 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
Apr 14 Javascript
javascript同步服务器时间和同步倒计时小技巧
Sep 24 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
Nov 02 Javascript
让你一句话理解闭包(简单易懂)
Jun 03 Javascript
js原生代码实现轮播图的实例讲解
Jul 28 Javascript
详解JavaScript函数callee、call、apply的区别
Mar 08 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
Sep 22 Javascript
JavaScript实现优先级队列
Dec 06 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
使用apache模块rewrite_module (转)
2007/02/14 PHP
php使用websocket示例详解
2014/03/12 PHP
深入讲解PHP的Yii框架中的属性(Property)
2016/03/18 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
完美解决JS中汉字显示乱码问题(已解决)
2006/12/27 Javascript
指定js可访问其它域名的cookie的方法
2007/09/18 Javascript
Javascript 调试利器 Firebug使用详解六
2009/07/05 Javascript
JSON传递bool类型数据的处理方式介绍
2013/09/18 Javascript
jsonp原理及使用
2013/10/28 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
2014/04/10 Javascript
JavaScript按值删除数组元素的方法
2015/04/24 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
2016/04/03 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
2016/08/02 Javascript
利用JS判断鼠标移入元素的方向
2016/12/11 Javascript
javascript实现电脑和手机版样式切换
2017/11/10 Javascript
vue超时计算的组件实例代码
2018/07/09 Javascript
详解使用mpvue开发github小程序总结
2018/07/25 Javascript
vue拖拽排序插件vuedraggable使用方法详解
2020/08/21 Javascript
vue中的过滤器实例代码详解
2019/06/06 Javascript
基于vue中的scoped坑点解说
2020/09/04 Javascript
[48:47]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
从零学Python之hello world
2014/05/21 Python
python实现获取客户机上指定文件并传输到服务器的方法
2015/03/16 Python
Python3导入自定义模块的三种方法详解
2018/04/13 Python
Python实现爬虫抓取与读写、追加到excel文件操作示例
2018/06/27 Python
python学生管理系统开发
2019/01/30 Python
python中单下划线(_)和双下划线(__)的特殊用法
2019/08/29 Python
Spartoo美国:欧洲排名第一的在线时装零售商
2019/12/12 全球购物
优秀团支部事迹材料
2014/02/08 职场文书
《美丽的黄昏》教学反思
2014/02/28 职场文书
美德少年事迹材料1000字
2014/08/21 职场文书
导游词之神仙居景区
2019/11/15 职场文书
详解Python中下划线的5种含义
2021/07/15 Python
IIS服务器中设置HTTP重定向访问HTTPS
2022/04/29 Servers
CSS list-style-type属性使用方法
2023/05/21 HTML / CSS