Vuex 简介、安装

本小节我们会介绍数据管理工具 vuex。什么是 Vuex、Vuex 的安装、以及如何创建和使用 Vuex 数据仓库。

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

让我们从简单的 Vue 计数应用开始：

<!DOCTYPE html>
<html lang="en">
<head>
  < charset="UTF-8">
  < name="viewport" content="width=device-width, initial-scale=1.0">
  < http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div> {{ count }} </div>
    <div>
      <button @click="increase">一次</button>
      <button @click="decrease">减少一次</button>
    </div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script type="text/javascript">
  var vm = new Vue({
    el: '#app',
    data() {
    	return {
        count: 
      }
    },
    methods: {
      increase() {
        this.count++
      },
      decrease() {
        this.count--
      }
    }
  })
</script>
</html>

这个状态自管理应用包含以下几个部分：

以下是表示 “单向数据流” 理念的简单示意：

对于问题一，传参的对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件状态传递无能为力。对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的。

因此，我们为什么不把组件的共享状态抽取出来，以全局单例模式管理呢？种模式下，我们的组件树构成了巨大的 “视图”，不管在树的哪个位置，任何组件都能状态或者触发行为！

通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态独立性，我们的将会变得更结构化且易维护。

Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行衡量。

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

我们可以在官网 () 上直接下载 vuex。
在 Vue 之后引入 vuex 会进行安装：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="/path/to/vuex.js"></script>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3.1.2/dist/vuex.js"></script>

npm install vuex --save
yarn add vuex

在模块化的打包系统中，您必须显式地通过 Vue.use() 来安装 Vuex：

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

Vue.use(Vuex)

当使用全局 script 引用 Vuex 时，不需要以上安装过程。

每 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：

<!DOCTYPE html>
<html lang="en">
<head>
  < charset="UTF-8">
  < name="viewport" content="width=device-width, initial-scale=1.0">
  < http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">{{count}}</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3.1.2/dist/vuex.js"></script>

<script type="text/javascript">
  const store = new Vuex.Store({
    state: {
      count: 
    }
  })
  var vm = new Vue({
    el: '#app',
    created() {
      console.log(store.state.count)
    },
    computed: {
	    count() {
		    return store.state.count
	    }
    }
  })
</script>
</html>

解释@H__453@
在 JS 第 4-8 行，通过 new Vuex.Store ({…}) 创建数据仓库。
在 JS 第 12 行，我们可以通过 store.state.count 访问仓库中定义的数据。

本节，我们带大家学习了 vuex 的基本概念。主要知识点有以下几点：

←VueRouter 路由传参

Vuex Getter→

Vuex 简介、安装

您的鼓励是对我最大的支持