1.1 vuex是什么
是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间的数据的共享
1.2 使用vuex统一管理状态的好处
能够在vuex中集中管理共享的数据,易于开发和后期维护
能够高效的实现组件之间的数据共享,提高开发效率
存储在vuex中的数据都是响应式的,能够实时保持数据与页面的同步
1.3 什么样的数据适合存储到vuex中
只有组件之间共享的数据,才有必要存储到vuex中;对于组件中的私有数据依旧存储在组件中自身的data中即可
1.4 vuex基本使用
(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中
vuex中主要的核心概念
State
提供唯一公共数据源,所有共享数据都要放到store的state中进行存储
组件访问state中的数据第一种方式:
this.$store.state.全局数据名称
组件访问state中的数据第二种方式:
1.从vuex中按需导入mapState函数
import {mapState} from ‘vuex’
2.将全局数据,映射为当前组件的计算属性
computed: {
...mapState(['count'])
}
Mutation
作用:用于变更store中的数据
如何触发调用mutation
第一种方式
可以在触发mutation时传递参数
第二种方式:
1.从vuex中按需导入mapMutation函数
2.将指定的mutation函数,映射为当前组件的methods函数
Action
作用:用于处理异步任务
第一种方式:
如果通过异步操作变更数据,必须通过Action,而不能使用Mutation,但是在Action中还是要通过触发Mutation的方式间接变更数据
第二种方式
1.从vuex中按需导入mapMutation函数
2.通过刚才导入的mapActions函数,将需要的actions函数,映射为当前组件的methods方法
Getter
作用:用于对store中的数据进行加工处理形成新的数据
怎么用:
第一种方式:this.$store.getters.名称
第二种方式: