大白话讲解 Vuex 该怎么样使用

Vuex 是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的全部组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

这是官网对 vuex 的一个简单介绍，看到这段介绍你们可能有点懵，没有关系，接下来我会为你们讲解一下 vuex 的一些基本概念，咱也不会什么底层原理，但更多的仍是教你们在实际工做中该怎么样使用

Vuex 状态管理核心

要想学会使用 Vuex 咱们先来简单了解一下 vuex 中的几个核心概念

State

Vuex就是一个仓库，仓库里面放了不少对象。其中state就是数据源存放地，对应于通常Vue对象里面的data

data() {
    return {
        a: 'b',
        b: 'a'
    }
}
复制代码

state里面存放的数据是响应式的，Vue组件从store中读取数据，如果store中的数据发生改变，依赖这个数据的组件也会发生更新

你能够把status看做成登陆后的状态，这几个页面都依赖于这个状态显示相应的信息，可是有一个页面作了退出的操做，其余几个页面也会受到影响

Getter

一、getters 能够对 State进行计算操做，他就是 Store的计算属性

二、虽然在组件内也能够作计算属性，可是getters能够在多组件内复用

Mutation && Action

action 相似于 mutation

不一样在于：Action 提交的是 Mutaion，而不是直接变动状态，mutation 是改变 store中状态的执行者，Action能够包含任意异步操做，而 mutation 只能是同步操做

什么状况下应该使用 Vuex?

若是您不打算开发大型单页应用，使用 Vuex 多是繁琐冗余的。确实是如此——若是您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式 就足够您所需了。可是，若是您须要构建一个中大型单页应用，您极可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为天然而然的选择。

很常见应用场景如：

• 购物城功能
• 登陆状态

...

使用 Vuex 的优点

• 多层嵌套的组件、兄弟组件间的状态会更好管理维护
• 缓存一些当前要使用请求远程或本地的数据集（刷新后会本身销毁）
• 有了第二条，就能够减小向服务器的请求，节省资源。若是你的用户足够多，那么每多出一个请求，对公司来讲，都是一大笔钱
• 对开发者来讲，若是你的项目足够复杂，团队的规模也不只是一我的，数据集中处理更利于程序的稳定和维护

很少逼逼让咱们在实践中学习 Vuex

Vuex 的案例

首先咱们先经过 Vue Cli 脚手架生成一个vue 项目

$ vue create vuex-test
复制代码

选择 Vuex 若是不选择咱们后边须要单独安装，为了省事仍是勾上吧

建立好项目后在你的项目根目录 src 下会有一个 store.js 文件

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {

  },
  mutations: {

  },
  actions: {

  }
})
复制代码

咱们看到这个 store.js 文件内容结构是这个样子，这是 vue-cli 帮咱们生成项目的时候自动生成的，接下来咱们就要基于这个模板来一步步完成咱们的小案例

咱们来撸 store.js

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    INCREMENT (state, num) {
      state.count = state.count + num
    },
    DECREMENT (state, num) {
      state.count = state.count - num
    }
  },
  actions: {
    increment: ({ commit }) => commit('INCREMENT', 1),
    decrement: ({ commit }) => commit('DECREMENT', 1)
  }
})
复制代码

在这个文件中咱们首先声明了一个状态 count, 接着咱们在 mutations 里写了两个方法来改变 count 的状态，以后咱们又在 actions 里写了两个方法去调用 mutations 里的方法, 一个很是简单的逻辑

为了省事，咱们直接在Vue CLI 建立的 模板中进行操做

App.vue

<template>
  <div id="app">
    <span>App组件： {{count}}</span>
    <br>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>

    <Home />
    <About />
  </div>

</template>

<script> import { mapActions, mapState } from 'vuex' import Home from './views/Home'; import About from './views/About'; export default { components: { Home, About }, computed: { ...mapState({ count: 'count' // count: 'count', // 第一种写法 // count: (state) => state.count, // 第二种写法 }) }, methods: { ...mapActions({ increment: 'increment', decrement: 'decrement' }) } } </script>

<style> #app { width: 200px; height: 200px; margin: 200px auto; } </style>
复制代码

上面咱们简单的画了下页面，并引入了其余两个组件，在上面咱们看到 mapStat 和 mapActions 这是什么鬼操做啊？？ 表面意思: mapState是 state 的辅助函数，相应的 mapActions 就是 actions 的辅助函数

• mapState 映射 this.count 为 store.state.count
• mapMutations 其实跟mapState 的做用是相似的，将组件中的 methods 映射为 store.commit 调用
• mapActions 将组件的 methods 映射为 store.dispatch 调用
• mapGetter 仅仅是将 store 中的 getter 映射到局部计算属性

这个页面的逻辑也很简单就是点击按钮对数据 +1 -1 的操做，当咱们点击按钮的时候分别触发了 actions 里的 increment 和 decrement 方法。由于咱们使用了mapActions 因此能够直接像普通方法同样去写 若是你不使用 mapActions， 那么你的写法就必须是这样 this.$store.dispatch('xxxxx')

借用官网的图： 经过过mapActions 触发mutation 从而commit ，改变state的值

Home.vue

<template>
  <div class="home">
    Home组件： {{count}}
  </div>
</template>

<script>

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState({
      count: 'count'
    })
  },
}
</script>
复制代码

在这个组件里咱们打印出了 count 这个状态的值

About.vue

<template>
  <div class="about">
    About组件： {{count}}
  </div>
</template>

<script>

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState({
      count: 'count'
    })
  },
}
</script>
复制代码

在这个组件里咱们打印出了 count 这个状态的值

有没有看到咱们在App这个组件中经过方法改变 count 的值，另外两个组件也会跟着变化，这就是一个简单的实例，我发现我真的不会写文章啊，多多包涵 谢谢...

我的博客