文章目录
Vue
六、Vuex
01.Vuex概述
(1)前情提要
- 组件通信(小范围内)
- 父传子:
v-bind
属性绑定 - 子传父:
v-on
事件绑定 - 兄弟间:
EventBus
$on
:发送数据的那个组件$emit
:发送数据的那个组件
- 父传子:
(2)Vuex
- Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间数据的共享
- 使用Vuex统一管理状态:
- 集中管理共享数据,易于开发和后期维护
- 高效实现组件之间的数据共享,提高开发效率
- 存储的数据都是响应式的,实时持数据与页面的同步
02.基本使用
(1)语法示例
// 1. 安装 vuex依赖包:npm install vuex --save
// 2. 导入 vuex包
import Vuex from 'vuex'
Vue.use(Vuex)
// 3. 创建 store 对象
const store = new Vuex.Store({
// 数据
})
// 4. 将 store 对象挂载到 vue实例
new Vue({
el: "#app",
render: h => h(app),
router,
store
})
03.核心概念
(1)State
-
State提供唯一的公共数据源,所有共享的数据都要统一放到Store的State中进行存储
const store = new Vuex.Store({ // state 中存放的就是全局共享的数据 state: { count: 0 } })
-
访问State数据的方式
-
第一种方式
// this.$store.state.全局数据名称 this.$store.state.count
-
第二种方式
// 1. 从 vuex 中按需导入 mapState 函数 import { mapState } from 'vuex' // 2. 将全局数据映射为当前组件的计算属性 computed: { // 将需要映射的数据放入数组中,可以传入多个 // 使用方式同 data 中的数据,即直接使用变量名 ...mapState(['count']) }
-
(2)Mutation
-
Vuex不允许组件直接修改store中的数据,只能通过在
mutations
中定义函数,来变更Store中的数据注意,不能在
mutations
中执行异步操作 -
使用方法:
const store = new Vuex.Store({ // state中存放的就是全局共享的数据 state: { count: 0 }, mutations: { // 在 mutations 中调用 state 中的数据进行变更 // 函数名( state[, 参数] ) add(state){ state.count++ }, sub(state, step){ state.count -= step } } })
-
触发mutations函数的方法:
-
第一种方法
methods:{ handleAdd(){ // 在组件中通过 this.$store.commit(mutations中的函数) // commit 的作用就是调用 mutations 的函数 this.$store.commit('add') }, handleSub(){ // 传参 this.$store.commit('add',3) } }
-
第二种方法
// 1. 从vuex中按需导入 mapMutations 函数 import { mapMutations } from 'vuex' // 2. 将指定的 mutations 函数映射为当前组件的 methods 函数 methods: { // 使用方式同 methods 中定义的方法,sub(3) ...mapMutations(['add', 'sub']) }
-
(3)Action
-
Action用于处理异步任务。不能在
mutations
中使用异步函数,只能在actions
中处理异步任务 -
使用方式:
const store = new Vuex.Store({ // state中存放的就是全局共享的数据 state: { count: 0 }, mutations: { // 在 mutations 中调用 state 中的数据进行变更 // 函数名( state[, 参数] ) add(state){ state.count++ }, sub(state, step){ state.count -= step } }, actions: { // 将异步操作定义到 actions 中 // 同样的,在 actions 中也不能直接修改 State中的数据 // 必须通过 mutations 中的函数来变更数据 addAsync(context){ setTimeout( ()=> { // 这里commit的只能是mutations中的函数 context.commit('add') },1000) }, subAsync(context, step){ setTimeout(()=>{ context.commit('sub',step) }) } } })
-
触发Action
-
第一种方式
methods:{ handleAdd(){ // 在组件中通过 this.$store.dispatch(actions中的函数) // dispatch 的作用就是调用 actions 中的函数 this.$store.dispatch('addAsync') }, handeleSub(){ // 传参 this.$store.dispatch('subAsync',3) } }
-
第二种方式
// 1. 从vuex中按需导入 mapActions 函数 import { mapActions } from 'vuex' // 2. 将指定的 actions 函数映射为当前组件的 methods 函数 methods: { // 使用方式同 methods 中定义的方法,subAsync(3) ...mapActions(['addAsync', 'subAsync']) }
-
(4)Getter
-
Getter用于对Store中的数据进行加工处理,形成新的数据(不会修改原数据,只作包装处理,类似computed计算属性)
-
使用方式·:
const store = new Vuex.Store({ // state中存放的就是全局共享的数据 state: { count: 0 }, mutations: { // 在 mutations 中调用 state 中的数据进行变更 // 函数名( state[, 参数] ) add(state){ state.count++ }, sub(state, step){ state.count -= step } }, actions: { // 将异步操作定义到 actions 中 // 同样的,在 actions 中也不能直接修改 State中的数据 // 必须通过 mutations 中的函数来变更数据 addAsync(context){ setTimeout( ()=> { // 这里commit的只能是mutations中的函数 context.commit('add') },1000) }, subAsync(context, step){ setTimeout(()=>{ context.commit('sub',step) }) } }, getter: { showNum(state){ retrun '当前数据是' + state.count } } })
-
使用Getter
-
第一种方式
this.$store.getters.名称
-
第二种方式
// 1. 从vuex中按需导入 mapGetters 函数 import { mapGetters } from 'vuex' // 2. 将指定的 getters 函数映射为当前组件的 computed 计算属性 computed: { // 使用方式同 computed 计算属性 ...mapGetters(['showNum']) }
-
(5)Module
modules
可以将store
模块化,每个模块中拥有自己的state
、mutations
、actions
和getters