vuex学习全面
一、组件之间的数据共享方式
- 父向子传值 v-bind 属性绑定
- 子向父传值 v-on 事件绑定
- 不相干组件 EventBus $on 接受数据的组件 $emit 发送数据的组件
二、vuex是什么
- vuex是实现组件全局状态(数据)管理的一种机制,可以实现组件之间的数据共享。
- vuex的好处:
2.1 能够在vuex中集中管理共享数据,易于后期开发
2.2 能够高效的实现组件之间的数据共享,提高开发效率
2.3 存储在vuex中的数据都是响应式的,能够实时保持数据与页面的同步 - 什么样式数据适合存vuex中?
一般情况下,只有组件之间共享的数据 ,菜有必要存到vuex中,对于组件的私有数据,依旧存储在组件自身的data中就可。
三、vuex的基本使用
- 安装vuex依赖包
npm install vuex -- save
- 导入vuex包
import Vuex from ‘vuex ’
Vuex.use(Vuex)
- 创建store对象
cosnt store = new Vuex.store({ // state 中存放的全局共享数据 state:{ count : 0 } })
- 挂载到vue中
四、vuex的核心概念
- state
1.1 state提供唯一的公共数据源,所有共享的数据都要统一放到store的state中进行存储
1.2 组件访问state中数据对的 第一种方法
this.$store.state.需要共享的数据名称( $this.store.state.xx)
1.3 组件访问 state数据 的第二种 方法
// 1. 从vuex中按需导入 mapState 函数
import { mapState } from 'vuex'
通过上方导入的mapState函数 ,将当前组件需要的全局数据 ,映射为 当前组件的computed 计算属性
// 2. 将全局数据,映射为 当前组件 的计算属性
computed :{
...mapState ({ ' 需要映射的共享数据名称 ( xx ) '})
}
- Mutation
2.1 Mutation 用于变更Store中的数据- 只能通过 mutation 来变更 state数据, 不可以直接操作state中的数据
- 可以集中监听所有数据的变化
// 定义 Mutation
const store = new Vuex.Store ({
// 当前mutations 的形参 对象
state:{
count: 0
},
mutations :{
add(state){
// 变更状态
state.count++
}
},
})
2.2. 使用的方法2 : 在methods中调用`
methods :{
方法名(){
this.$store.commit(' muttions 中的需要调用的函数名(如上面的add)')
}
}
2.3. 触发mutation 时传递参数 :
// mutation 定义
const store = new Vuex.Store ({
// 当前mutations 的形参 对象
state:{
count: 0
},
mutations :{
add1(state , step ){
// 变更状态
state.count += step
}
},
// 在子组件中调用方法
methods :{
方法名(){
this.$store.commit(' muttions 中的需要调用的函数(add1), 3 ')
}
}
})
3.Action
注: 不可以在mutation 中使用异步操作
- 第一种触发方式 : 如果通过异步操作变更数据,必须通过Action ,而不能使用mutation 但在action中还是要通过触发mutation的方式来间接的改变数据
在mutation 同级下 写actions 且在actions 中使用异步代码就可以了
如图:
只有在mutations 才可以修改 state 且只能用 dispatch才可以调用mutation方法
触发actions 异步任务是携带参数:
2. 第二种触发方式 :
3. Getter
Getter 用于对state中的数据进行加工处理形成新的数据,并且getter不会改变state中的原数据
3.1 getter 可以对 store 中 已有的数据加工处理之后形成新的数据 类似vue的计算属性
3.2 store 中的数据发生变化 , getter 的数据也会跟着变化
// 第一种使用
this.$store.state.xx (xx : getters中需要的函数)
第二种使用方式: