Vue 基础笔记 -Vuex

系列文章目录

Vue 基础笔记 - 开发前准备工作
Vue 基础笔记 - 组件
Vue 基础笔记 - 模板、属性、事件处理、表单等
Vue 基础笔记 - 创建、编译、启动并与 Spring 整合

---

前言

    通常 Web 应用都会采用 MVC 的模式来进行开发， 当然，这是传统意义上的概念。如今， 前端进过多年的发展，已经拥有了独立开发的体系， 自然在开发模式上也更专业，层次更清晰，分工更明确。今天学习的 Vuex 就是专门用来管理 Vue 应用中状态信息的一个插件。

---

一、Vuex 是什么？

1. 官方介绍

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

2. 什么时候使用？

1. 如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。可以使用简单的 store 模式 。
2. 如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

3. Vuex 的逻辑结构图

4. Vuex 的结构

示例代码如下：

	const store = new Vuex.Store({
	
		state: {
		  // 存放状态
		},
		getters: {
		  // state的计算属性
		},
		mutations: {
		  // 更改state中状态的逻辑，同步操作
		},
		actions: {
		  // 提交mutation，异步操作
		},
		// 如果将store分成一个个的模块的话，则需要用到modules。
		 //然后在每一个module中写state, getters, mutations, actions等。
		modules: {
		  a: moduleA,
		  b: moduleB,
		  // ...
		}
	});

说明：

• state – 存放状态
• getters – state的计算属性
• mutations – 更改状态的逻辑，同步操作
• actions – 提交mutation，异步操作
• mudules – 将store模块化

5. 核心知识点

    Vuex 中最关键的是store对象，这是vuex的核心。可以说，vuex这个插件其实就是一个store对象，每个vue应用仅且仅有一个store对象。关于 store 需要记住两点：

1. store 中存储的状态是响应式的，当组件从store中读取状态时，如果store中的状态发生了改变，那么相应的组件也会得到更新；
2. 不能直接改变store中的状态。改变store中的状态的唯一途径是提交(commit)mutations。这样使得我们可以方便地跟踪每一个状态的变化。

---

二、使用步骤

1. 安装

	cnpm install vuex --save

2. 一个简单的示例

创建一个 store。仅提供一个初始 state 对象和一些 mutation：

	import Vue from 'vue'
	import Vuex from 'vuex'
	
	Vue.use(Vuex)
	
	const store = new Vuex.Store({
	  state: {
	    count: 0
	  },
	  mutations: {
	    increment (state) {
	      state.count++
	    }
	  }
	})

3. Vue 注入 store

为了在 Vue 组件中访问 this.$store property，你需要为 Vue 实例提供创建好的 store。Vuex 提供了一个从根组件向所有子组件，以 store 选项的方式“注入”该 store 的机制：

	new Vue({
	  el: '#app',
	  store: store,
	})

4. 在 Vue 组件中使用

现在我们可以从组件的方法提交一个变更，并在控制台输出变更结果

	methods: {
	  increment() {
	    this.$store.commit('increment')
	    console.log(this.$store.state.count)
	  }
	}

---

总结

本文简单介绍了 Vuex 插件，记录了关于 Vuex 的核心知识。并通过一个简单的示例展示如何使用 Vuex。在日常工作中主要用于用户状态管理，还没有大规模的使用， 在之后的使用过程中随时做好经验记录。