开始!正常的简单的拆分下是这样的文件当然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的更多相关文章

  1. Vuex 的使用 State Mutation Getter Action

    import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); /*1.state在vuex中用于存储数据*/ var state={ cou ...

  2. 挑战全网最幽默的Vuex系列教程:第二讲 Vuex旗下的State和Getter

    先说两句 上一讲 「Vuex 到底是个什么鬼」,已经完美诠释了 Vuex 的牛逼技能之所在(纯属自嗨).如果把 Vuex 比喻成农药里面的刘备,那就相当于你现在已经知道了刘备他是一个会打枪的力量型英雄 ...

  3. 【vuex】mutation和action的区别

    const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } ...

  4. vuex mutation,action理解

    1. 在store中分别注册mutation和action,action中用commit同步调用mutation来执行修改state,但是在组件中则使用dispatch异步调用action 2. 通俗 ...

  5. Do not mutate vuex store state outside mutation handlers.

    组件代码: selectItem(item,index) { this.selectPlay({ list: this.songs, index }) }, ...mapActions([ 'sele ...

  6. 06-vue项目02:vuex、Mutation、Action、ElementUI、axios

    1.Vuex 1.为什么使用VueX data从最上面的组件,一层层往下传值,一层层的验证 Vue单向数据流 “中央空调“,代理 VueX 解决数据 传值.. 2.Vuex介绍与安装 (1)Vuex官 ...

  7. vuex2.0 基本使用(2) --- mutation 和 action

    我们的项目非常简单,当点击+1按钮的时候,count 加1,点击-1按钮的时候,count 减1. 1, mutation The only way to actually change state ...

  8. 【14】vuex2.0 之 mutation 和 action

    我们的项目非常简单,当点击+1按钮的时候,count 加1,点击-1按钮的时候,count 减1. 1, mutation The only way to actually change state ...

  9. (转)vuex2.0 基本使用(2) --- mutation 和 action

    我们的项目非常简单,当点击+1按钮的时候,count 加1,点击-1按钮的时候,count 减1. 1, mutation The only way to actually change state ...

随机推荐

  1. java——类的封装

    public void setName(String str) { name=str; } public void setAge(int a) //set方法需要在括号中定义数据类型 { if(a&g ...

  2. xgene:WGS,突变与癌,RNA-seq,WES

     人类全基因组测序06 SNP(single nucleotide polymorphism):有了10倍以上的覆盖深度以后,来确认SNP信息,就相当可靠了. 一个普通黄种人的基因组,与hg19这个参 ...

  3. 【机器学习】分类算法——Logistic回归

    一.LR分类器(Logistic Regression Classifier) 在分类情形下,经过学习后的LR分类器是一组权值w0,w1, -, wn,当测试样本的数据输入时,这组权值与测试数据按照线 ...

  4. 微信小程序运行机制

    对于扫描接口B生成的带参小程序码的问题: (1)线上版本 扫描不同带参的小程序码会重新执行小程序的整个注册程序生命周期(详细生命周期函数见官方文档), (2)扫描相同的二维码的时候,目前微信官方给出的 ...

  5. 使用军哥的lnmp配置虚拟主机,需要注意的是要配置hosts文件

    #使用军哥的lnmp配置虚拟主机,需要注意的是要配置hosts文件(这一点官方没有讲到)具体方法:1.修改hosts文件sudo vim /etc/hosts 2.在hosts文件中新增一行(这里类似 ...

  6. sqlserver2012——INTERSECT交查询

    1. select a.成绩编号,a.分数,b.姓名 From 成绩信息 a,学生信息 b ' 一般的查询 a.成绩编号,a.分数,b.姓名 From 成绩信息 a,学生信息 b ' order a. ...

  7. Debian系统下的ftp服务搭建

    安装vsftpd服务 $ sudo apt install vsftpd 配置参数 命令输入 $ vim /etc/vsftpd.conf 使用如下配置 # Example config file / ...

  8. 存储过程为参数NULL时的处理方法

    准备一些数据: SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO CREATE TABLE [dbo].[Goods]( ) NULL, ) NULL, ...

  9. 用matplotlib画线

    1:matplotlib基础 Matplotlib 是一个 Python 的 2D绘图库,它以各种硬拷贝格式和跨平台的交互式环境生成出版质量级别的图形[1] . 通过 Matplotlib,开发者可以 ...

  10. C++ BYTE、WORD与DWORD类型

    在VS中,BYTE与WORD,DWORD本质上都是一种无符号整型,它们在WINDEF.H中被定义,定义如下: typedef unsigned char       BYTE;typedef unsi ...