vuex的简单使用
使用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的简单使用的更多相关文章
- Vuex 最简单的数量增减实例
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 ...
- vuex最简单、最直白、最全的入门文档
前言 我们经常用element-ui做后台管理系统,经常会遇到父组件给子组件传递数据,下面一个简单的例子,点击按钮,把弹框显示变量数据通过子组件的props属性传递,子组件通过$emit事件监听把数据 ...
- vuex最简单、最详细的入门文档
如果你在使用 vue.js , 那么我想你可能会对 vue 组件之间的通信感到崩溃 . 我在使用基于 vue.js 2.0 的UI框架 ElementUI 开发网站的时候 , 就遇到了这种问题 : 一 ...
- Vuex的简单应用
### 源码地址 https://github.com/moor-mupan/mine-summary/tree/master/前端知识库/Vuex_demo/demo 1. 什么是Vuex? Vue ...
- vue的挖坑和爬坑之vuex的简单入门
首先vuex的中文文档https://vuex.vuejs.org/zh-cn/ 首先vuex是什么,官方解释是 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应 ...
- NO.01---今天聊聊Vuex的简单入门
作为一款个人认为非常牛x的框架,个人使用起来得心应手,所以近期就记录一下这款框架吧. 首先说一说 Vuex 是什么? 官方给出的解释:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它 ...
- [转] vuex最简单、最直白、最全的入门文档
前言 我们经常用element-ui做后台管理系统,经常会遇到父组件给子组件传递数据,下面一个简单的例子,点击按钮,把弹框显示变量数据通过子组件的props属性传递,子组件通过$emit事件监听把数据 ...
- Vuex教程简单实例
什么是Vuex? vuex是一个专门为vue.js设计的集中式状态管理架构.状态?我把它理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态.简单的说就是data中需要共用的属性. ...
- 移动端最强适配(rem适配之px2rem)&& 移动端结合Vuex实现简单loading加载效果
一.rem之px2rem适配 前言:相信许多小伙伴上手移动端时面对各式各样的适配方案,挑选出一个自己觉得简便.实用.高效的适配方案是件很纠结的事情. 深有体会... 经过多个移动端项目从最初的 vie ...
- vuex最简单的
https://segmentfault.com/a/1190000009404727 "dependencies": { "axios": " ...
随机推荐
- 【Java】包装类总结
Java语言是一个面向对象的语言,但是Java中的基本数据类型却是不面向对象的,这在实际使用时存在很多的不便,为了解决这个不足,在设计类时为每个基本数据类型设计了一个对应的类进行代表,这样八个和基本数 ...
- Linux Shell sort排序常用命令(转载)
转载自:http://blog.csdn.net/monkeyduck/article/details/10097829 1 sort的工作原理 sort将文件的每一行作为一个单位,相互比较,比较原则 ...
- sqlserver 对多条数据分组
在开发中,经常会遇到要吧一行行数据按照某一行进行分组 USE [OA] GO /****** Object: StoredProcedure [dbo].[usp_report_GatherDataM ...
- Android几种layout(布局)的区别
1.FrameLayout:children按照从左上开始的顺序排列,主要用于tabed view或者图片切换功能:最简单的布局模型,在这种布局下每个添加的子控件都被放在布局的左上角,并覆盖在前一子控 ...
- echart 地图
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"% ...
- IPC通信:Posix消息队列
IPC通信:Posix消息队列 消息队列可以认为是一个链表.进程(线程)可以往里写消息,也可以从里面取出消息.一个进程可以往某个消息队列里写消息,然后终止,另一个进程随时可以从消息队列里取走这些消息. ...
- pthread_cond_wait()函数的详解
http://hi.baidu.com/tjuer/item/253cc6d66b921317d90e4483 了解 pthread_cond_wait() 的作用非常重要 -- 它是 POSIX 线 ...
- Java基本功—Reference
这是一篇一年多之前便已写就的文章,那时,因为很多Java程序员只求追随新生的事物,却连基本的概念都没有,很多讨论中,很明显是基本功不过硬,于是萌生写一个系列文章,讨论Java的基本功,下面便是在这个想 ...
- ExtJs 常用小技巧备忘录
1. ExtJs 给fieldLabel与fieldInput添加样式{给Input标签加入图标}http://www.w3school.com.cn/cssref/pr_background.asp ...
- Iconfont在移动端遇到问题的探讨
Iconfont越来越得到前端的关注,特别是阿里那个iconfont库的推出和不断完善,再加上连IE6都能兼容,的确是个好东西. 既然那么火,我们公司移动项目也计划加入这个iconfont,于是我就针 ...