上两期谈到了父子和兄弟组件传值，但都停留在组件一对一传值的层面，写起来比较繁琐。大家可能会问：Vue能不能将传递的数据储存在一个全局仓库，可以让所有组件调用和修改？于是Vuex就诞生了。这篇文章就来介绍下Vuex是什么，以及Vuex的具体用法。

一、介绍

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

简单地来说，Vuex是一个全局仓库插件，可以储存Vue应用中的全局变量，并通过所写的全局方式来对全局变量进行操作。话不多说，让我们来看看如何用代码实现Vuex。

二、安装及部署

npm install vuex --save

创建一个/store文件夹，添加index.js文件，并写入以下代码。

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

Vue.use(Vuex);	//全局引用Vuex

const store = new Vuex.Store({
    state: {
    	//加入全局变量
    },
    mutations: {
    	//加入操作全局变量的方法
    }
});

export default store;

三、State和Mutation

如上方代码所示，Vuex有两大核心部分：state是储存全局变量的，mutation是包含操作全局变量的方法。打个比方，如果我们要储存一个全局的todoList列表，并写一个方法来添加todo：

state: {
	todoList: []
},
mutations: {
	// mutation方法的第一个参数必须填state
    addTodo(state, todo) {
        state.todoList.push(todo);
    },
}

在任一组件中，addTodo可以通过commit方法被引用，从而添加指定todo：

// todoList.vue
export default {
	name: 'todoList',
	data() {
		return {
			todoToAdd: 'meeting',
		}
	}
	methods: {
		toAddTodo() {
			this.$store.commit('addTodo', this.todoToAdd);
			console.log(this.$store.state.todoList);  //output: ['meeting']
		}
	}
}

这样我们就完成了一个简单的Vuex部署！


↓喜欢文章的话，就给作者点个赞加关注吧~