vuex的state,mutation,getter,action
开始!正常的简单的拆分下是这样的文件当然module可以在store下面新建一个文件夹用来处理单独模块的vuex管理比较合适。
1.index.js下面
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import * as actions from './actions'
import * as getters from './getters'
import createRenderer from 'vuex/dist/logger' Vue.use(Vuex) const debug = process.env.NODE_DEV !== 'production'
export default new Vuex.Store({
state,
mutations,
actions,
getters,
strict: debug,
plugins: debug ? [createRenderer()] : []
})
2.state.js 存放的都是公共数据源(简称全局数据或者全局变量)
const state = {
count:0,
num:1
}
export default state
3.mutations.js
import * as types from './mutation-types'
const mutations = {
// ++操作
[types.ADD_COUNT](state,count) {
console.log(state, 'state状态', count, 'count额外参数')
state.count++
},
// --操作
[types.REDUCE_COUNT](state,count) {
console.log(state, 'state状态', count, 'count额外参数')
state.count--
},
// num ++
[types.NUM_PLUS](state,count) {
console.log(state, 'state状态', count, 'count额外参数')
state.num++
},
}
export default mutations
4.mutation-types.js mutation常量一般
export const ADD_COUNT = 'ADD_COUNT' // count ++
export const REDUCE_COUNT = 'REDUCE_COUNT' // count --
export const NUM_PLUS = 'NUM_PLUS' // num ++
5.getters.js vuex 中的getters 想当于vue中的computed ,getters是vuex 中的计算属性 ,计算属性写起来是方法,但它是个属性
export const count = state => state.count
export const num = state => state.num
7.actions.js
// import * as types from './mutation-types'
/* actions体验vuex 的异步特效*/
export const addCount = ({commit}) => {
setTimeout(() => {
commit('ADD_COUNT') // 提交的是mutation,mutation是同步操作
}, 1000)
}
export const reduceCount = ({commit}) => {
setTimeout(() => {
commit('REDUCE_COUNT') // 提交的是mutation,mutation是同步操作
}, 1000)
}
export const numPlus = ({commit}) => {
setTimeout(() => {
commit('NUM_PLUS') // 提交的是mutation,mutation是同步操作
}, 1000)
}
8.组件内使用
<template>
<div class="hello">
<p>state:{},状态数据集</p>
<p> getters:{},公共状态数据集</p>
<p>mutations:{},主要用于改变状态</p>
<p>actions:{},是可以解决异步问题</p>
<hr/>
<h1>{{ msg }}</h1>
<p>在组件中如何获取vuex的state对象中的属性:方法一<span style="color:red;margin-left:15px">{{$store.state.count}}</span></p>
<p>在组件中如何获取vuex的state对象中的属性:方法二<span style="color:red;margin-left:15px">{{count}}</span></p>
<p>在组件中如何获取vuex的state对象中的属性:方法三(写法一可用别名)<span style="color:red;margin-left:15px">{{newCount}}</span></p>
<p>在组件中如何获取vuex的state对象中的属性:方法三(写法二)<span style="color:red;margin-left:15px">{{count}}</span></p>
<hr/>
<h1>{{ msg1 }}</h1>
<p>在组件中如何使用vuex的getters:写法一<span style="color:red;margin-left:15px">{{getNum}}</span></p>
<p>在组件中如何使用vuex的getters:写法二<span style="color:red;margin-left:15px">{{num}}</span></p>
<hr/>
<h1>{{ msg2 }}</h1>
<p style="margin-top:10px">
<el-button @click="$store.commit('ADD_COUNT')">mutations写法一(count++操作)</el-button>
<el-button type="primary" @click="$store.commit('REDUCE_COUNT')">mutations写法一(count--操作)</el-button>
<el-button type="success" @click="$store.commit('NUM_PLUS')">mutations写法一(num++操作)</el-button>
</p>
<p style="margin-top:10px">
<el-button type="info" @click="ADD_COUNT">mutations写法二(count++操作)</el-button>
<el-button type="warning" @click="REDUCE_COUNT">mutations写法二(count++操作)</el-button>
<el-button type="danger" @click="NUM_PLUS">mutations写法二(num++操作)</el-button>
</p>
<hr/>
<h1>{{ msg3 }}</h1>
<p style="margin-top:10px">
<el-button @click="$store.dispatch('addCount')">actions写法一(count++操作)</el-button>
<el-button type="primary" @click="$store.dispatch('reduceCount')">actions写法一(count--操作)</el-button>
<el-button type="success" @click="$store.dispatch('numPlus')">actions写法一(num++操作)</el-button>
</p>
<p style="margin-top:10px">
<el-button type="info" @click="addCount">actions写法二(count++操作)</el-button>
<el-button type="warning" @click="reduceCount">actions写法二(count--操作)</el-button>
<el-button type="danger" @click="numPlus">actions写法二(num++操作)</el-button>
</p>
</div>
</template> <script>
// 使用vuex的各种常用姿势
import { mapActions, mapGetters, mapState, mapMutations } from 'vuex'
export default {
name: 'HelloWorld',
data () {
return {
msg: 'vuex之state',
msg1: 'vuex之getters',
msg2: 'vuex之mutations',
msg3: 'vuex之actions',
}
},
computed: {
// vuex 取 state 方法二
count() {
return this.$store.state.count
},
// vuex 取 state 方法三
...mapState({
newCount: state => state.count //写法一
}),
...mapState(['count']), // 写法二 /************************/
// vuex 使用 getters 写法一
getNum() {
return this.$store.getters.num
},
...mapGetters(['num'])
},
created() { },
methods: {
...mapMutations(['ADD_COUNT','REDUCE_COUNT','NUM_PLUS']),
...mapActions(['addCount','reduceCount','numPlus'])
},
}
</script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped> </style>
9.App.vue 关于vuex数据刷新后消失的处理
<template>
<div id="app">
<!-- <img src="./assets/logo.png"> -->
<router-view/>
</div>
</template> <script>
export default {
name: 'App',
data() {
return { }
},
created() {
//在页面加载时读取localStorage/ sessionstorage里的状态信息
localStorage.getItem("store") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("store"))))
//在页面刷新时将vuex里的信息保存到localStorage里解决vuex数据页面刷新丢失问题
window.addEventListener("beforeunload",()=>{
localStorage.setItem("store",JSON.stringify(this.$store.state))
})
}
}
</script> <style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
}
</style>
当然这只是参考。代码风格千万种只要找到合适自己的好用的都可以参考借鉴下。
vuex的state,mutation,getter,action的更多相关文章
- Vuex 的使用 State Mutation Getter Action
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); /*1.state在vuex中用于存储数据*/ var state={ cou ...
- 挑战全网最幽默的Vuex系列教程:第二讲 Vuex旗下的State和Getter
先说两句 上一讲 「Vuex 到底是个什么鬼」,已经完美诠释了 Vuex 的牛逼技能之所在(纯属自嗨).如果把 Vuex 比喻成农药里面的刘备,那就相当于你现在已经知道了刘备他是一个会打枪的力量型英雄 ...
- 【vuex】mutation和action的区别
const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } ...
- vuex mutation,action理解
1. 在store中分别注册mutation和action,action中用commit同步调用mutation来执行修改state,但是在组件中则使用dispatch异步调用action 2. 通俗 ...
- Do not mutate vuex store state outside mutation handlers.
组件代码: selectItem(item,index) { this.selectPlay({ list: this.songs, index }) }, ...mapActions([ 'sele ...
- 06-vue项目02:vuex、Mutation、Action、ElementUI、axios
1.Vuex 1.为什么使用VueX data从最上面的组件,一层层往下传值,一层层的验证 Vue单向数据流 “中央空调“,代理 VueX 解决数据 传值.. 2.Vuex介绍与安装 (1)Vuex官 ...
- vuex2.0 基本使用(2) --- mutation 和 action
我们的项目非常简单,当点击+1按钮的时候,count 加1,点击-1按钮的时候,count 减1. 1, mutation The only way to actually change state ...
- 【14】vuex2.0 之 mutation 和 action
我们的项目非常简单,当点击+1按钮的时候,count 加1,点击-1按钮的时候,count 减1. 1, mutation The only way to actually change state ...
- (转)vuex2.0 基本使用(2) --- mutation 和 action
我们的项目非常简单,当点击+1按钮的时候,count 加1,点击-1按钮的时候,count 减1. 1, mutation The only way to actually change state ...
随机推荐
- 在MongoDB中修改数据类型
引言 本文主要讲解Mongodb的类型转换.包括:string转double, string转int, string转Date. 0. 出现类型不一致的原因 ES导入数据到Mongo后,会出现类型统一 ...
- dpdk学习笔记2
一 了解dpdk准备知识 1 NAT NAT技术是为了缓解IPV4地址枯竭得问题,通过使用NAT技术,一个机构如学校可以只用单一得公网IP来范文互联网,在外界看来只有一台接入公网得设备.NAT分为两种 ...
- java之Date(日期)、Date格式化、Calendar(日历)
参考http://how2j.cn/k/date/date-date/346.html Date(日期) Date类 注意:是java.util.Date; 而非 java.sql.Date,此类是给 ...
- 8. php回调后门
中国菜刀下载,基于原版中国菜刀优化版20160309. 下载地址: http://pan.baidu.com/s/1jHoJxHW China chopper http://pan.baidu.com ...
- 懒人模式开启Android模块自动化Api之旅
推荐阅读: 滴滴Booster移动App质量优化框架-学习之旅 一 Android 模块Api化演练 不一样视角的Glide剖析(一) 在将业务进行模块化时,避免不了模块页面路由和模块通信, 大多数我 ...
- Linux下使用sendEmail发送带附件的邮件(转载)
转载:http://www.ttlsa.com/linux/use-sendemail-send-file/ sendEmail是一个轻量级,命令行的SMTP邮件客户端.如果你需要使用命令行发送邮件, ...
- Codeforces617E【莫队算法+前缀异或】
题意: 给出一系列数,对每个查询区间,计算有多少个子区间异或为k. 思路: 可以先预处理异或前缀,一个区间[L,R]的异或值=sum[R]^sum[L-1]; 如果当前区间是[a,b],加一个右端点b ...
- 3dmax视频
http://wenku.baidu.com/course/list/514?tagID=177
- 洛谷 P2216 [HAOI2007]理想的正方形
P2216 [HAOI2007]理想的正方形 题目描述 有一个a*b的整数组成的矩阵,现请你从中找出一个n*n的正方形区域,使得该区域所有数中的最大值和最小值的差最小. 输入输出格式 输入格式: 第一 ...
- abap table control里面各种属性和事件的写法
SAP中,Table Control是在Screen中用的最广泛的控件之一了,可以实现对多行数据的编辑. 简单来说,Table Control是一组屏幕元素在Screen上的重复出现,这就是它与普通屏 ...