四:Vue之VUEX状态管理

(注:本文适用于有一定Vue基础或开发经验的读者,文章就知识点的讲解不一定全面,但却是开发过程中很实用的)

概念:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

应用场景:Vue多个组件之间需要共享数据或状态。

Vuex有几个核心概念:State、Getter、Mutation、Action、Module。

State:存储状态数据

Getter:从状态数据派生数据,相当于State的计算属性。

Mutation:存储用于同步更改状态数据的方法,默认传入的参数为state。

Action:存储用于异步更改状态数据,但不是直接更改,而是通过触发Mutation方法实现,默认参数为context。

Module:Vuex模块化。

它们之间的交互关系如下图(来源于官方文档)所示:

接下来先看一个Vuex应用的简单实例,新建store.js文件并添加如下代码:

import Vue from ‘vue‘;
import Vuex from ‘vuex‘;
Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    name: ‘‘
  },
  getters: {
    getName(state) {
      return ‘hello ‘ + state.name;
    }
  },
  mutations: {
    mutationSetName(state, name) {
      state.name = name;
    }
  },
  actions: {
    actionSetName(context, name) {
      setTimeout(() => {
        context.commit(‘mutationSetName‘, name);
      }, 1000);
    }
  }
});
export default store;

然后将该store实例注入到所有子组件,方法如下:

import store from ‘./store.js‘;
new Vue({
  el: ‘#app‘,
  router,
  // 把 store 对象提供给 “store” 选项,这可以把 store 的实例注入所有的子组件
  store,
  components: { App },
  template: ‘<App/>‘
});

接下来就可以在vue的各个子组件中通过下面的方式访问vuex对象实例。

this.$store.state.name;
this.$store.getters.getName;
this.$store.commit(‘mutationSetName‘, ‘zhangsan‘);
this.$store.dispatch(‘actionSetName‘, ‘lisi‘);

或者也可以通过辅助函数的方式访问,

1、需要在应用的子组件中引入辅助函数

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

2、在计算属性computed中注入state和getters

computed: {
    ...mapState({
      // 把 `this.name` 映射为 `this.$store.state.name`
      name: state => state.name
    }),
    ...mapGetters({
      // 把 `this.getName` 映射为 `this.$store.getters.getName`
      getName: getName
    })
}

3、在methods中注入mutations和actions

methods: {
    ...mapMutations([
      // 将 `this.mutationSetName()` 映射为 `this.$store.commit(‘mutationSetName‘)`
      ‘mutationSetName‘
    ]),
    ...mapActions([
      // 将 `this.actionSetName()` 映射为 `this.$store.dispatch(‘actionSetName‘)`
      ‘actionSetName‘
    ])
}

模块化

由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store对象就有可能变得相当臃肿。

为了解决以上问题,Vuex允许我们将store分割成模块。每个模块拥有自己的state、getter、mutation、action、甚至是嵌套子模块-从上到下进行同样的分割。

下面新建moduleA和moduleB两个js文件,分别添加如下代码:

const moduleA = {
  namespaced: true,
  state: {
    name: ‘‘
  },
  getters: {},
  mutations: {},
  actions: {}
}
export default moduleA;
const moduleB = {
  namespaced: true,
  state: {
    name: ‘‘
  },
  getters: {},
  mutations: {},
  actions: {}
}
export default moduleB;

然后新建store.js文件并引入上述两个模块文件,代码如下:

import moduleA from ‘./moduleA.js‘;
import moduleB from ‘./moduleB.js‘;
const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})
export default store;

其中a、b为自定义的模块别名,接下来按前文同样的方式将store对象注入vue。

访问方式如下:

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

辅助函数访问方式和前文所讲区别不大,只是多了模块名称字段:

computed: {
    ...mapState(‘a‘, {
      name: state => state.name
    }),
    ...mapState(‘b‘, {
      name: state => state.name
    })
}

其他几个对象getter、mutation、action的访问方式类似,都要加上模块名称字段。

注意:

1、是否使用Vuex要根据项目的实际规模,在简单的应用中使用 Vuex 可能会显得繁琐冗余;对于中大型的单页应用,Vuex在状态管理方面才是最好的选择。

2、Vuex和单纯的全局对象不同。Vuex 的状态存储是响应式的,当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。

3、不能直接改变 store 中的状态,改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation,这样有利于跟踪每一个状态的变化。

以上就是vuex的基础用法,更多详细的说明请查阅官方文档:https://vuex.vuejs.org/zh/

原创出自:https://www.cnblogs.com/fengyuexuan/p/10946073.html

原文地址:https://www.cnblogs.com/liaochangqiang/p/11543710.html

时间: 2024-11-01 19:04:49

四:Vue之VUEX状态管理的相关文章

应用四:Vue之VUEX状态管理

概念:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 应用场景:Vue多个组件之间需要共享数据或状态. Vuex有几个核心概念:State.Getter.Mutation.Action.Module. State:存储状态数据 Getter:从状态数据派生数据,相当于State的计算属性. Mutation:存储用于同步更改状态数据的方法,默认传入的参数为state. Action:存储

vue组件化开发-vuex状态管理库

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试.状态快照导入导出等高级调试功能. 以上是vuex的官方文档对vuex的介绍,官方文档对vuex的用法进行了详细的说明.这里就不再细讲vuex的各个用法,写这篇博客的目的只是帮助部分同学更快地理解并上手vuex.

vue从入门到进阶:Vuex状态管理(十)

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 在 Vue 之后引入 vuex 会进行自动安装: <script src="/path/to/vue.js"></script> <script src="/path/to/vuex.js"></script> 可以通过 https://unpkg.com/[em

vue.js的状态管理vuex中store的使用

一.状态管理(vuex)简介 vuex是专为vue.js应用程序开发的状态管理模式.它采用集中存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.vuex也集成刀vue的官方调试工具devtools extension,提供了诸如零配置的time-travel调试.状态快照导入导出等高级调试功能. 二.状态管理核心 状态管理有5个核心,分别是state.getter.mutation.action以及module.分别简单的介绍一下它们: 1.state state为

Vue中的状态管理器 - Vuex

我们知道vue是组件式开发的,当你的项目越来越大后,每个组件背后的数据也会变得越来越难以理顺, 这个时候你就可以考虑使用vuex了. 备注: 官方建议小项目不要使用,引入vuex会带来新的概念和模式,这对于新手而言理解上本身有难度,而且小项目中vuex发挥的功效确实不怎么明显, 反而增加了开发难度,就像后端项目中常说的 过度设计. 说了这么多,下面介入正题(以下讲解需要一个空的vue项目,推荐使用 vue-cli 创建,快速搭建一个vue开发环境 ): vuex的作用就是作为一个数据仓库(sto

vuex状态管理

一.安装vuex(npm i vuex),创建store.js import Vue from 'vue' import Vuex from 'vuex' import state from './state' import getters from './getters' import actions from './actions' import mutations from './mutations' Vue.use(Vuex) export default new Vuex.Store(

vuex状态管理2

在vuex的官网https://vuex.vuejs.org中,提到的核心概念一共有5个,分别是State.Getter.Mutation.Action和Module,在上一篇随笔中,我们主要用到其中的State和Mutation,接下来,我们来分析剩下几个使用方法,在这里,是在上一篇的基础上面完成的. 这是上一篇结束时实现的功能,现在接着这个项目继续分析. Getter 在官网中对getter的定义是:就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改

Vuex状态管理详解

什么是Vuex Vuex的作用(什么样的情况下使用Vuex) 状态的分类 使用事件来改变兄弟组件之间的数据状态示例 使用Vuex 安装vuex模块 作为插件使用 定义一个容器 注入根实例 简易计算器实例分析Vuex流程

Vue学习日记(四)——Vue状态管理vuex

前言 先说句前话,如果不是接触大型项目,不需要有多个子页面,不使用vuex也是完全可以的. 说实在话,我在阅读vuex文档的时候,也很难以去理解vuex,甚至觉得没有使用它我也可以.但是直到我在项目碰到下面这些问题: 当路由切换的时候,原本路由的数据太多,传递过去太麻烦. 有些数据是多个路由需要用到的,那我就需要从后台获取多次数据 当然,这些问题都可以解决,就是在实例化vue对象的时候,就将这些数据绑定在window对象上面.但是我们也不得不设想: 万一数据太多了,那么可阅读性是不是会下降 如果