一、Vuex 介绍
-
Vuex 是 vue 项目中实现大范围数据共享的技术方案
-
Vuex作用:能够方便、高效地实现组件之间的数据共享
-
使用 Vuex 的好处:
- 数据的存取一步到位,不需层层传递
- 数据的流动非常清晰
- 存储在 Vuex 中的数据都是响应式的
二、使用步骤
引入库
代码如下(示例):
//在store文件/index.js 配置
// 1. 下包
npm i vuex
// 2. 导入 Vuex
import Vuex from 'vuex'
// 3. 安装 Vuex 插件
Vue.use(Vuex)
// 4. 创建 store 对象
const store = new Vuex.Store({})
// 5. 默认导出 store 对象
export default store
//在main.js配置
// 6. 导入 store 对象
import store from './store'
// 7. 挂载到 Vue 实例上
new Vue({
render: h => h(App),
store
}).$mount('#app')
三、 vuex成员介绍
1.State 的基本使用
- 概念:State 本质上就是 Object 对象
- 作用:用来存储全局共享的数据
- 组件访问 State 数据的第一种方式
this.$store.state.全局数据名称
组件访问 State 数据的第二种方式(有辅助函数)
// 1.按需导入
import { mapState} from 'vuex'
// 2. 在计算属性中调用 mapState
...mapState(['count', 'username', 'list']),
// 3.在store文件/index.js
state: {
count: 0,
username: 'xxx',
list: [ ]
}
2.Mutation 的基本使用
- Mutation 本质 : 是 JavaScript 函数
- 特点:想要修改 State 中的数据,只能调用 Mutation 方法!
- 好处:能够确保修改来源的唯一性,方便调试和后期维护
- 作用 : 专门负责修改 State 中的数据
- 所有 mutation 函数第一个参数都是 state (必须是同步任务 )
// 1. 定义 mutation 函数
mutations: {
addCount (state, payload) {
console.log(payload)
}
}
// 2.在 methods 中调用函数
this.$store.commit('addCount', { num: 1 })
// 1.按需导入
import { mapMutations } from 'vuex'
// 2. 在 methods 中调用 mapMutations辅助函数
methods: {
...mapMutations(['addCount']),
}
3.Action 的基本使用
- Action 本质上是 JavaScript 函数,专门用来处理 Vuex 中的异步操作
- Action 不能直接修改数据源
- Action 把异步操作的结果,转交给 Mutation,由 Mutation 负责修改数据源
// 1. 定义 action 函数
actions: {
// 所有 action 函数第一个参数都是 context 上下文对象 -> 当成 store 对象使用
// 2.第二个参数是 payload 载荷传递过来的参数
addAsync(context, payload) {
context.commit('addCount', payload)
}
// 1. 按需导入辅助函数
import { mapActions} from 'vuex'
// 2. 在 methods 中调用 mapActions辅助函数
methods: {
...mapActions(['addAsync']),
asyncAddCount() {
// 调用 action 中的 addAsync
this.$store.dispatch('addAsync', { num: 100 })
//有辅助函数的做法
this.addAsync({ num: 100 })
}
}
4 .Getter 的基本使用
- Getter 本质上是 JavaScript 函数
- getters 等于是 Vuex 中的计算属性, 所以可以全局共享使用
- 作用:它是 Vuex 中的计算属性,当 Store 数据源发生变化时,Getter 的返回值会自动更新。
- getters 等于是 Vuex 中的计算属性, 所以可以全局共享使用
getters: {
// 1. 定义 getters
// 2.第一个参数永远都是 state
// 3.必须要返回一个结果
isAll(state) {
return state.list.every(item => item.isDone)
}
},
// 1. 按需导入辅助函数
import { mapActions} from 'vuex'
// 2. 在计算属性中调用 mapGetters
...mapGetters(['isAll']),
5.Module 的基本使用
- Vuex 中的 Module 表示按照模块化的开发思想,把不同的数据和方法,按照彼此的关联关系进行封装
- 每个模块都是彼此独立的,都可以拥有自己的 state、mutations、actions、getters 节点
// 1. 导入子模块
import count from './count'
import cart from './cart'
// 2. 注册模块
modules: {
// 属性名就是模块名
// 属性值就是模块对象
// count: count
// 不要和全局 state 中的数据重名
moduleCount: count,
moduleCart: cart
}
总结
- mapState: 映射 state 中的数据
- mapMutations: 映射 mutations 的函数
- mapActions: 映射 actions 的函数
- mapGetters: 映射 getters 中的计算属性
- 所有的辅助函数调用都会返回一个对象, 对象中存放着映射过来的函数
建议:
- 如果访问数据建议使用辅助函数, 会更方便
- 如果是调用 mutation 或 action 的函数, 可以不用使用辅助函数