专栏首页Web前端开发Vuex状态管理总结

Vuex状态管理总结

一、什么是 Vuex

1、Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式

2、Vuex 采用集中式存储和管理应用中所有组件的状态

3、Vuex 应用的核心是 store(仓库)-- 包含 state(组件中的共享状态)和 mutations(改变状态的方法)

二、Vuex 的安装

1、在项目根目录终端引入:

npm install vuex --save

2、在 main.js 中加入:

import store from './store'

三、Vuex 核心概念

1、State

state 可以看作是所有组件的 data,用于保存所有组件的公共数据。

2、Getters

getters 可以看作是所有组件的 computed 属性,getters 的返回值会根据它的依赖被缓存起来,只有当它的依赖值发生改变才会被重新计算。

3、Mutations

mutations 可以看作是 store 中的 methods,其中保存着更改数据的回调函数。

4、Actions

actions 类似于 mutations,区别在于:

  • actions 提交的是 mutations 而非直接变更状态
  • actions 中可以包含异步操作,而mutations 中不允许出现异步

5、Modules

由于使用单一状态树,当应用变得非常复杂时,store 对象会变得相当臃肿,Vuex 允许将 store 分割成模块(module)。每个模块拥有自己的 state、mutations、actions、getters、甚至是嵌套子模块——从上至下进行同样方式的分割:

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

四、Vuex 的使用

1、Vuex 获取 store 数据

通过 store.state 来获取状态对象,示例:

store.js 文件:

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    num: 1
  },
  mutations: {
    changeFunction (state, num) {
      state.num++
    }
  }
})

main.js 文件:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

views/demo.vue 文件:

<template>
  <div>
    <p>{{msg}}</p>
    <button @click="getNum">getNum</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: '0'
    }
  },
  methods: {
    getNum () {
      this.msg = this.$store.state.num
    }
  }
}
</script>

运行效果:

2、Vuex 修改 store 数据

通过 store.commit 方法触发状态变更,示例:

store.js 文件:

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    num: 1
  },
  mutations: {
    changeFunction (state, num) {
      state.num++
    }
  },
  actions: {
    changeNum ({ commit }, obj) {
      commit('changeFunction', obj)
    }
  }
})

main.js 文件:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

views/demo.vue 文件:

<template>
  <div>
    <p>{{msg}}</p>
    <button @click="getNum">getNum</button>
    <button @click="changeNum">changeNum</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: '0'
    }
  },
  methods: {
    getNum () {
      this.msg = this.$store.state.num
    },
    changeNum () {
      this.$store.dispatch('changeNum', 100000)
      this.msg = this.$store.state.num
    }
  }
}
</script>

运行效果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Spark Core源码精读计划5 | 事件总线及ListenerBus

    在讲解SparkContext组件初始化时,第一个初始化的内部组件就是LiveListenerBus,后面的组件很多都会依赖它,这从侧面说明事件总线是非常重要的...

    暴走大数据
  • Spring Boot集成CKEditor 顶

    项目中需要用到富文本编辑器,朋友推荐用CKEditor。CKEditor可以和Spring mvc很好的集成。CKEditor与CKFinder学习–整合Spr...

    用户2146693
  • 正则表达式-零宽断言实践

    处理JSON字符串KEY值中的特殊字符,VALUE中的字符不受影响。 如下所示,替换KEY中的_DOT_为点.,_SUB_为_。

    用户2146693
  • 使用开源库构建自定义视频体验

    本帖来自VES(Video Engineering Summit)2019的演讲,主要内容是使用开源库构建自定义视频体验(Building A Custom V...

    用户1324186
  • select标签添加onclick()事件的兼容写法

    以上代码片是可以在Firefox和IE9下运行的,但是它在我的360浏览器上就是无效的,究其原因还是IE版本的问题(存在兼容性问题), 也就是:老版本只能这样 ...

    ZONGLYN
  • 七夕将至,我用代码写了一个表白神器!

    七夕节马上就要到了,又到了各位单身汪报复社会的时间了。今年的七夕节,各位单身汪们你们准备好了吗?把电影院的单号座位都订完?晚上去宾馆敲门?用针扎TT?这些老掉牙...

    蓝默空间
  • 前端快速入门之概述

    以下是对(前端)可视化工作的并不系统的总结,新手向,主要是想说一下前端如何组成、功能如何实现、资源如何请求,进而说到数据如何显示,并在最后列举了一些十分重要的参...

    ZONGLYN
  • Spark Core源码精读计划6 | AsyncEventQueue与LiveListenerBus

    在上一篇文章中,我们了解了Spark事件总线机制的概况,以及ListenerBus、SparkListenerBus的细节。

    暴走大数据
  • 《Python入门04》Python字符串的那些“事儿”

    前几天收到小伙伴的留言,说你写的python相关教程意义不大,还不如专门整理《NLP》相关文章供大家参考学习,还有小伙伴说你的python入门怎么不更新...

    ShuYini
  • 基础服务系列-Centos7 安装Node.js10

    wget https://nodejs.org/dist/v10.16.0/node-v10.16.0-linux-x64.tar.xz

    用户2146693

扫码关注云+社区

领取腾讯云代金券