深入vue-element-admin(二)之vuex

上一篇总结了语言的切换国际化,在login-index文件中,遇到了登录后的操作,接触到了vuex,这一篇就了解一下vuex吧
简单的说vuex对vue中多个组件共享的状态进行集中式的管理(读/写)

Vuex的核心

当我们在页面上点击一个按钮,它会处发(dispatch)一个action, action 随后会执行(commit)一个mutation, mutation 立即会改变state, state 改变以后,我们的页面会state 获取数据,页面发生了变化。 Store 对象,包含了我们谈到的所有内容,action, state, mutation,所以是核心了

状态管理核心状态管理有5个核心,分别是state、getter、mutation、action以及module。

1、state
state为单一状态树,在state中需要定义我们所需要管理的数组、对象、字符串等等,只有在这里定义了,在vue.js的组件中才能获取你定义的这个对象的状态。
2、getter
getter有点类似vue.js的计算属性,当我们需要从store的state中派生出一些状态,那么我们就需要使用getter,getter会接收state作为第一个参数,而且getter的返回值会根据它的依赖被缓存起来,只有getter中的依赖值(state中的某个需要派生状态的值)发生改变的时候才会被重新计算
3、mutation
更改store中state状态的唯一方法就是提交mutation,就很类似事件。每个mutation都有一个字符串类型的事件类型和一个回调函数,我们需要改变state的值就要在回调函数中改变。我们要执行这个回调函数,那么我们需要执行一个相应的调用方法:store.commit。
4、action
action可以提交mutation,在action中可以执行store.commit,而且action中可以有任何的异步操作。在页面中如果我们要用这个action,则需要执行store.dispatch
5、module module其实只是解决了当state中很复杂臃肿的时候,module可以将store分割成模块,每个模块中拥有自己的state、mutation、action和getter。

Vuex实例操作

只看概念的话不是很好理解,通过官网的实例分析各个环节

Vuex核心流程.png

如图,Vuex核心模块就是有颜色区域,介绍下流程:
1.state是在vuex中设置的初始值,也就是需要共享和更改的变量。通过store进行访问,虽然是计算方法,但是用法也是想属性一样访问$store.getters。
3.actions是修改state的动作,页面组件触发通过dispatch方法请求,传递给mutations。
4.mutations:是直接对state进行修改,由acitons通过commit方法提交。

实例

app.vue

<template>
  <div id="app">
    <p>click {{$store.state.count}} times count is {{evenOrOdd}}</p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementIfOdd">increment if odd</button>
    <button @click="incrementAsync">increment async</button>
  </div>
</template>
<script>
export default {
  //计算属性
  computed: {
    evenOrOdd() {
      return this.$store.getters.evenOrOdd;
    }
  },
  methods: {
    // 增加
    increment() {
      //   const count = this.count;
      //   this.count = count + 1;
      this.$store.dispatch("increment");
    },
    decrement() {
      this.$store.dispatch("decrement");
      //   const count = this.count;
      //   this.count = count - 1;
    },
    // 如果是奇数就加1
    incrementIfOdd() {
      this.$store.dispatch("incrementIfOdd");
      //   const count = this.count;
      //   if (count % 2 === 1) {
      //     this.count = count + 1;
      //   }
    },
    incrementAsync() {
      this.$store.dispatch("incrementAsync");
      //   setTimeout(() => {
      //     const count = this.count;
      //     this.count = count + 1;
      //   }, 1000);
    }
  }
};
</script>

store.js

import Vue from 'vue'
import vuex from 'vuex'
// vuex的核心管理模块
Vue.use(vuex)

const state = {
  count: 0
}
const mutations = {
  // 增加的mutation
  INCREMENT(state) {
    state.count++
  },
  // 减少的木塔tion
  DECREMENT() {
    state.count--
  },
  INCREMENTIFODD() {
    state.count++
  },
  INCREMENTASYNC() {
    state.count++
  }
}
const actions = {
  increment({ commit, state }, data) {
    // 增加的action
    commit('INCREMENT')
  },
  decrement({ commit, state }, data) {
    commit('DECREMENT')
  },
  // 有条件aciton  commit 和 state都是作为参数传递的
  incrementIfOdd({ commit, state }, data) {
    if (state.count % 2 === 1) {
      commit('INCREMENTIFODD')
    }
  },
  //异步action 可直接使用
  incrementAsync({ commit, state }, data) {
    setTimeout(() => {
      commit('INCREMENTASYNC')
    }, 1000)
  }
}
const getters = {
  // 对应外面组件的计算属性
  evenOrOdd(state) {
    return state.count % 2 === 0 ? '偶数' : '奇数 '
  }
}
export default new vuex.Store({
  state, //状态
  mutations, // 包含多个更新state函数的对象
  actions, //包含多个对应事件回调函数的对象
  getters //包含多个getter 计算属性函数的对象
})

文章整理自尚硅谷

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 由于Vuex的官方文档在各个模块之间缺乏一些过渡,另外新概念很多,使得初读时总有些云里雾里的感觉。于是本文在官方文...
    一郭鲜阅读 361评论 0 1
  • ### store 1. Vue 组件中获得 Vuex 状态 ```js //方式一 全局引入单例类 // 创建一...
    芸豆_6a86阅读 744评论 0 3
  • 系列文章:Vue 2.0 升(cai)级(keng)之旅Vuex — The core of Vue applic...
    6ed7563919d4阅读 4,596评论 2 58
  • 上一章总结了 Vuex 的框架原理,这一章我们将从 Vuex 的入口文件开始,分步骤阅读和解析源码。由于 Vuex...
    你的肖同学阅读 1,826评论 3 16
  • 2018年8月12日360修炼第35天:身体和思想是互动的,我们的思想会由我们的身体反映出来,今天我们继续探索。情...
    丁调调阅读 170评论 0 0