简介
Vuex 是 Vue.js 应用程序的状态管理模式和库。
它主要用于集中管理应用的全局状态,使得多个组件可以方便地共享和操作这些状态。通过 Vuex,可以更清晰地组织和管理应用中的数据,以及实现数据在组件之间的高效传递和同步。
核心概念
state:状态对象,集中定义各个组件共享的数据
mutations:类似于一个事件,用于修改共享数据,要求必须是同步函数
actions:类似于mutation,可以包含异步操作,通过调用mutation来改变共享数据
使用方式
1.安装 Vuex:通过 npm 等包管理工具进行安装。
npm install vuex@next -save
2.创建 store:定义状态、 mutations、actions、getters 等。
3.在 Vue 实例中引入 store:通过 {insert\_element\_0\_VnVl}.use(Vuex) 并将 store 实例传递给 Vue 实例。
4.在组件中使用:可以通过 this.$store.state 访问状态,通过 this.$store.commit() 提交 mutations 来修改状态(mutations中定义的函数不能直接调用,必须通过这种方式来调用),通过 this.$store.dispatch() 派发 actions 等。
下面是vuex的一个简单代码演示:
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
//集中管理多个组件的共享数据
const store = new Vuex.Store({
//共享数据
state: {
count: 0
},
//修改共享数据只能通过mutation实现,必须是同步操作
mutations: {
increment(state) {
state.count++;
}
},
//通过actions可以调用到mutations,在actions中进行异步操作
actions: {
//注意在异步请求后需要修改共享数据
//在actions中调用mutation中定义的一些函数
}
});
new Vue({
el: '#app',
store
});