Vuex 基本使用 (附 todolist_demo)
vuex 概述
vuex 是实现组件全局状态(数据) 管理的一种机制, 可以方便的实现组件之间的共享
优点 :
- 能够在 vuex 中集中管理共享的数据, 易于开发和后期维护
- 能够高效地实现组件之间的数据共享 , 提高开发效率
- 存储在 vuex 中的数据都是响应式的 , 能够实时保持数据与页面的同步
什么样的数据适合存储到 vuex 中
一般情况下 , 只有组件之间共享的数据 , 才有必要存储到 vuex 中 ; 对于组件中私有数据 , 依旧存在组件自身的 data 中即可
vuex 基本使用
安装 vuex 依赖包
npm install vuex --save导入 vuex 包
import vuex from 'vuex' Vue.use(vuex)创建 store 对象
const store = new Vuex.Store({ // state 中存放的就是全局共享的数据 state: { count: 0 } })将 store 对象挂载到 vue 实例中
new Vue({ el: '#app', render: h => h(app), router, // 将创建的共享数据对象, 挂载到 vue 中 // 所有的组件, 就可以直接从 store 中获取全局的数据了 store })
Vuex 核心概念
State
State 提供唯一的公共资源 , 所有共享的数据都要统一放到 Store 的 State 中进行存储
// 创建 Store 数据源, 提供唯一公共数据
const Store = new Vuex.Store({
state: { count: 0 }
})
组件访问 State 中数据
// 第一种 this.$store.state.共享数据名称
this.$store.state.count
// 第二种
// 1. 从 vuex 中按需导入 mapState 函数
import { mapState } from 'vuex'
// 通过导入的 mapState 函数, 将当前组件需要的全局数据, 映射为当前组件的 computed 计算属性
computed: {
...mapState(['count'])
}
Mutation
Mutation 用于变更 Store 中的数据 , 不要在 Mutation 中执行异步操作
- 只能通过 mutations 变更 Store 数据 , 不可以直接操作 Store 中的数据
- 通过这种方式虽然操作起来稍微繁琐一些 , 但是可以集中监控所有数据的变化
// 定义 mutation
const store = new Vuex({
state: {
count: 0
},
mutations: {
// 普通函数
add(state) {
// 变更状态
state.count++
},
// 带有参数
addN(state, step) {
state.count += step
}
}
})
组件中访问 mutation 方法
import { mapMutations } from 'vuex'
methods:
// 第二种 将 mutation 函数映射为当前组件的 methods 方法
...mapMutations(['add', 'addN']),
handle() {
// 触发 mutation 的第一种方式
this.$store.commit('add')
this.$store.commit('addN', 5)
},
handle2() {
this.add()
this.addN(5)
}
}
Action
Action 用于处理异步任务
如果通过异步操作变更数据 , 必须通过 Action , 而不能使用 Mutation , 但是在 Action 中还是要通过触发 Muation 的方式间接变更数据
// 定义 actions
const store = new Vuex.Store({
mutations: {
add(state) {
state.count++
}
},
// 在actions中, 不能直接修改 state 中的数据
// 必须通过 context.commit() 触发某个 mutations 才行
actions: {
addAsync(context) {
setTimeout(() => {
context.commit('add')
}, 1000)
},
addNAsync(context, step) {
setTimeout(() => {
context.commit('add', step)
})
}
}
})
触发 Actions 的方式
import { mapActions } from 'vuex'
methods: {
...mapActions(['addAsync', addNAsync])
// 第一种
handle() {
// 这里的 dispatch 函数是专门触发 actions
this.$store.dispatch('addAsync')
this.$store.dispatch('addNAsync', 5)
},
handle1() {
this.addAsync()
this.addNAsync(5)
}
}
Getter
Getters 用于对 Store 中的数据进行加工处理成新的数据 , 他并不会修改 Store 中的数据
- Getters 可以对 Store 中已有的数据加工处理之后形成新的数据 , 类似于 Vue 中的 computed 属性
- Store 中数据 发生变化 Getters 的数据也会跟着变化
const Store = new Vue.Store({
state: {
count: 0
},
getters: {
showData(state) {
return `当前的最新的数量够为: ${state.count}`
}
}
})
使用 Getters 的方法
// 第一种 this.$store.getters.数据
this.$store.getters.count
// 第二种
import { mapGetters } from 'vuex'
computed: {
...mapGetters('showData')
}
