码迷,mamicode.com
首页 > 其他好文 > 详细

四:Vue之VUEX状态管理

时间:2019-09-18 17:50:39      阅读:95      评论:0      收藏:0      [点我收藏+]

标签:turn   computed   简单的   使用   apm   过程   aced   log   get   

(注:本文适用于有一定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

四:Vue之VUEX状态管理

标签:turn   computed   简单的   使用   apm   过程   aced   log   get   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!