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 相关文章推荐
JS下拉框内容左右移动效果的具体实现
Jul 10 Javascript
js函数在frame中的相互调用详解
Mar 03 Javascript
JavaScript基于原型链的继承
Jun 22 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
Oct 15 Javascript
CodeMirror js代码加亮使用总结
Mar 25 Javascript
Vue单文件组件基础模板小结
Aug 10 Javascript
js判断数组是否包含某个字符串变量的实例
Nov 24 Javascript
基于Node.js实现压缩和解压缩的方法
Feb 13 Javascript
React key值的作用和使用详解
Aug 23 Javascript
生成无限制的微信小程序码的示例代码
Sep 20 Javascript
JavaScript实现模态对话框实例
Jan 13 Javascript
vue 监听 Treeselect 选择项的改变操作
Aug 31 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
一个ubbcode的函数,速度很快.
2006/10/09 PHP
深入HTTP响应状态码速查表的详解
2013/06/07 PHP
thinkphp3.2点击刷新生成验证码
2016/02/16 PHP
PHP7.1方括号数组符号多值复制及指定键值赋值用法分析
2016/09/26 PHP
鼠标移动到一张图片时变为另一张图片
2006/12/05 Javascript
Javascript MD4
2006/12/20 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
2013/08/13 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
2013/11/06 Javascript
javascript进行数组追加方法小结
2014/06/16 Javascript
JavaScript生成随机数的4种自定义函数分享
2015/02/28 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
2015/03/04 Javascript
javascript实现简单的鼠标拖动效果实例
2015/04/10 Javascript
Javascript实现网络监测的方法
2015/07/31 Javascript
Bootstrap开发实战之第一次接触Bootstrap
2016/06/02 Javascript
jQuery EasyUI 页面加载等待及页面等待层
2017/02/06 Javascript
老生常谈js中0到底是 true 还是 false
2017/03/08 Javascript
原生JS获取元素的位置与尺寸实现方法
2017/10/18 Javascript
原生JS实现$.param() 函数的方法
2018/08/10 Javascript
vue项目部署到Apache服务器中遇到的问题解决
2018/08/24 Javascript
使用vuex解决刷新页面state数据消失的问题记录
2019/05/08 Javascript
利用d3.js实现蜂巢图表带动画效果
2019/09/03 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
2019/10/24 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
2020/05/19 Javascript
Python Queue模块详细介绍及实例
2016/12/27 Python
解决Pycharm中import时无法识别自己写的程序方法
2018/05/18 Python
利用Python实现微信找房机器人实例教程
2019/03/10 Python
python 中的paramiko模块简介及安装过程
2020/02/29 Python
详解python datetime模块
2020/08/17 Python
德国BA保镖药房韩文网:kr.ba.de
2017/09/04 全球购物
澳大利亚冒险体验:Adrenaline(跳伞、V8赛车、热气球等)
2017/09/18 全球购物
巴西宠物商店:Cobasi
2019/04/19 全球购物
SQL Server的固定数据库角色都有哪些?对应的服务器权限有哪些?
2013/05/18 面试题
Prototype中如何为一个元素添加一个方法
2014/12/08 面试题
经典广告词大全
2014/03/14 职场文书
会计人员岗位职责
2014/03/19 职场文书
交警失职检讨书
2015/01/26 职场文书