vuex状态管理：vuex

什么是vuex？

vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
这是vuex官网的解释。我们把它理解为在data中的属性需要共享给其他vue组件使用的部分，即data中需要共用的属性。

vuex的核心概念

1. this.$store：我们可以通过this.$store在vue的组件中获取vuex的实例。

2. State：vuex中的数据源，我们可以通过this.$store.state获取我们在vuex中声明的全局变量的值。

3. Getter：相当于vue中的computed，及计算属性，可以用于监听、计算 state中的值的变化。

4. Mutation：vuex中去操作数据的方法（只能同步执行）。

5. Action：用来操作Mutation 的动作，他不能直接去操作数据源，但可以把mutation变为异步的。

6. Module：模块化，当应用足够大的时候，可以把vuex分成多个子模块。

上手vuex

  1. 用vue-cli构建一个项目，用命令npm install vuex --save来安装vuex

  2. 在src文件夹下新建一个vuex文件夹，并在文件夹下新建store.js文件

  3. 配置main.js

import App from './App'
import router from './router'
import vuex from 'vuex'

Vue.use(vuex)
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})
  1. 配置store.js 
import Vue from 'vue'
import vuex from 'vuex'

Vue.use(vuex)

const state={
    count:1
}

export default new vuex.Store({
    state
})
  1. 在components新建一个count.vue组件，先引入，再注册，最后调用
<template>
  <div>
    {{$store.state.count}}  <!-- 调用 -->
  </div>
</template>

<script>
import store from '@/vuex/store'  //引入
export default {
  store  //注册
}
</script>

<style>
</style>
  1. 在定义两个方法来改变state中的值
import Vue from 'vue'
import vuex from 'vuex'

Vue.use(vuex)

const state={
    count:1
}

const mutations={
    add(state){  //此处的state是上面的state对象
        state.count++
    },
    reduce(state) {
        state.count--
    }
}

//用export default 暴露，让外部可以使用
export default new vuex.Store({ 
    state,
    mutations
})
  1. 在组件中调用mutations的方法，要以commit的方式调用
<template>
  <div>
    {{$store.state.count}}
    <div>
      <button @click="$store.commit('add')">+</button>  
      <button @click="$store.commit('reduce')">-</button>  
    </div>
  </div>
</template>

<script>
import store from '@/vuex/store'
export default {
  store
}
</script>

<style>
</style>

从图中可以看到，已经实现了对vuex中的count加减操作

访问state的三种方式

把stroe.js中的值，赋值给我们模板里data中的值，有三种赋值方式：

1. 通过computed的计算属性直接赋值

computed属性可以在输出前，对data中的值进行改变，我们就利用这种特性把store.js中的state值赋值给我们模板中的data值。

export default {
    store,
    computed:{
        count(state){
            return this.$store.state.count
        }
    }
}

同时将模板中的$store.state.count改为count，效果不变

2. 通过mapState的对象来赋值

先引入mapState

import {mapState} from 'vuex'

再修改成如下代码：

computed:mapState({
  count(state){
    return state.count
  }
})

3. 通过mapState的数组来赋值

computed:mapState(['count'])

这是最简单的写法，也是开发中最常用的方法

Mutations

接下来修改一下mutations中的add方法，给它加个参数

const mutations={
    add(state,x){
        state.count+=x
    },
    reduce(state) {
        state.count--
    }
}

在模板中相应修改：

<div>
  <button @click="$store.commit('add',10)">+</button>  
  <button @click="$store.commit('reduce')">-</button>  
</div>


类似之前的state的属性的调用，mutations的方法调用也很麻烦，没有人会喜欢用$store.commit()去调用方法

模板获取Mutations方法

先引入mapMutations

import {mapState,mapMutations} from 'vuex'

在methods中加入mapMutations的方法

methods:mapMutations(['add','reduce'])

最后修改模板，就跟平时的调用方法一样了

<div>
  <button @click="add(10)">+</button>  
  <button @click="reduce">-</button>  
</div>

getters计算过滤操作

对count进行计算属性的操作，让它输出前先加上100

import Vue from 'vue'
import vuex from 'vuex'

Vue.use(vuex)

const state={
    count:1
}

const mutations={
    add(state,x){
        state.count+=x
    },
    reduce(state) {
        state.count--
    }
}

const getters={
    count(state){
        return state.count+=100
    }
}

//用export default 暴露，让外部可以使用
export default new vuex.Store({ 
    state,
    mutations,
    getters
})

state和getters都是通过computed属性输出的，所以当getters的介入会覆盖掉state，所以使用es6的扩展运算符…

computed:{
    ...mapState(['count']),
    count(){
        return this.$store.getters.count
    }
}


测试一下会发现每次都是+110，是因为点击一下，先通过getters计算得到新的state（此时已经+100） 然后由mutation改变+10

用mapGetters简化模板写法

先引入mapGetters

import {mapState,mapMutations,mapGetters} from 'vuex'

修改成如下代码：

computed:{
    ...mapState(['count']),
    ...mapGetters(['count'])
}

Actions异步修改状态

actions和之前讲的mutations功能基本一样，不同点是，actions是异步的改变state状态，而mutations是同步改变状态。

import Vue from 'vue'
import vuex from 'vuex'

Vue.use(vuex)

const state={
    count:1
}

const mutations={
    add(state,x){
        state.count+=x
    },
    reduce(state) {
        state.count--
    }
}

const getters={
    count(state){
        return state.count+=100
    }
}

const actions={
    actions_add(context){
        context.commit('add',10)
    },
    actions_reduce({commit}){
        commit('reduce')
    }
}
//用export default 暴露，让外部可以使用
export default new vuex.Store({ 
    state,
    mutations,
    getters,
    actions
})

两个方法的传参不同：

  • ontext：上下文对象，即store本身
  • {commit}：直接把commit对象传递过来，更加清晰

模板使用Actions方法

引入mapActions

import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'

在methods中写入：

methods:{
    ...mapMutations(['add','reduce']),
    ...mapActions(['actions_add','actions_reduce'])
}

最后在模板中调用方法

<div>
  <button @click="actions_add(10)">+</button>  
  <button @click="actions_reduce">-</button>  
</div>

Module模块组

随着项目的复杂性增加，共享的状态越来越多，此时就需要对状态进行分组，分组后再进行按组编写，实现状态管理器的模块组操作。

新增两个文件夹，并且都新增一个store.js


在test1/store.js中写入

import Vue from 'vue'
import vuex from 'vuex'

Vue.use(vuex)

const state = {
  name: 'test1'
}

export default new vuex.Store({
  state
})

复制test2/store.js中，修改name为test2

import Vue from 'vue'
import vuex from 'vuex'

Vue.use(vuex)

const state = {
  name: 'test2'
}

export default new vuex.Store({
  state
})

在根目录的store.js中引入这两个模块

import Vue from 'vue'
import vuex from 'vuex'
import modules1 from './test1/store'
import modules2 from './test2/store'
Vue.use(vuex)

export default new vuex.Store({
  modules: {
    modules1,
    modules2
  }
})

最后在模板中使用

<template>
  <div>
        {{name1}}
        {{name2}}
  </div>
</template>

<script>
import store from '@/vuex/store'
import {mapState} from 'vuex'
export default {
    store,
    computed:{
        ...mapState({
            name1:({modules1})=>modules1.name,
            name2:({modules2})=>modules2.name,
        }),
    }
}
</script>

<style>
</style>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 214,904评论 6赞 497
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,581评论 3赞 389
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 160,527评论 0赞 350
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,463评论 1赞 288
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,546评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,572评论 1赞 293
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,582评论 3赞 414
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,330评论 0赞 270
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,776评论 1赞 307
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,087评论 2赞 330
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,257评论 1赞 344
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,923评论 5赞 338
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,571评论 3赞 322
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,192评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,436评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,145评论 2赞 366
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,127评论 2赞 352

推荐阅读更多精彩内容

  • 最详细的Vuex教程
    姓名：岳沁 学号：17101223458 转载自：http://blog.csdn.net/h5_queensty...
    丘之心阅读 2,139评论 0赞 1
  • vuex 入门随记
    vuex 入门随记 首先肯定是要安装vuex 这里我们使用npm包管理工具进行安装 npm install vue...
    Yhong_阅读 380评论 0赞 2
  • vuex 使用说明
    安装 npm npm install vuex --save 在一个模块化的打包系统中，您必须显式地通过Vue.u...
    萧玄辞阅读 2,932评论 0赞 7
  • vuex
    引入vuex 1.利用npm包管理工具，进行安装 vuex。在控制命令行中输入下边的命令就可以了。 npm ins...
    令武阅读 301评论 0赞 0
  • vuex
    利用npm包管理工具，进行安装 vuex npm install vuex --save 建立vuex 管...
    Hassd阅读 542评论 0赞 0