上两期谈到了父子和兄弟组件传值,但都停留在组件一对一传值的层面,写起来比较繁琐。大家可能会问: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部署!
↓喜欢文章的话,就给作者点个赞加关注吧~