一、 Vuex
1、简介
Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间数据的共享。
①能够在vuex中集中管理共享的数据,易于开发和后期维护
②能够高效地实现组件之间的数据共享, 提高开发效率
③存储1在vuex中的数据都是响应式的,能够实时保持数据与页面的同步
一般情况下,只有组件之间共享的数据,才有必要存储到vuex中;对于组件中的私有数据,依旧存储在组件自身的data中即可。
2、核心概念
1、定义store对象
//(1).安装vuex依赖包
npm install vuex – save
//(2).导入vuex包
import Vuex from 'vuex'
Vue .use (Vuex)
//(3).创建store对象
const store = new Vuex.store ( {
state: { count: 0 } // state 中存放的就是全局共享的数据
})
//(4).将store对象挂载到vue实例中
new Vue ({
el: '#app',
render: h => h(app) ,
router ,
//将创建的共享数据对象,挂载到vue实例中,所有的组件,就可以直接从store 中获取全局的数据了
store
})
2、state属性
3、Mutation属性
Mutation用于变更Store中的数据。
store对象 | vue对象 |
![]() |
3.1、Mutation传递参数
store对象 | vue对象 |
方式一 ![]() | |
方式二 ![]() |
4、Action属性
store对象 | vue对象 |
触发Action方式一 ![]() | |
触发Action方式二 ![]() |
5、Getter
5.1、访问Getter属性