Vuex
State
-
概念:Stare本质上就是Object对象
-
作用:用来存储全局共享的数据
-
访问方式:
-
在每个Vuez组件中,通过
this.$store.state.全局数据名称
访问Store中的数据 -
基于Vuex提供的
mapState
辅助函数,可以方便的把Store中指定的数据,映射为当前组件的计算属性
- 先按需导入赋值函数mapState
import {mapState} from 'vuex'
- 把需要的全局数据,映射当前组件的计算属性
...mapState(['数据名'])
…表示展开
- 先按需导入赋值函数mapState
-
安装使用
1.下包
yarn add vuex@3.6.2
适合Vue2开发
2.导入
import Vuex from 'Vuex'
3.安装插件
Vue.use(Vuex)
4.创建Store对象(里面存放state数据)
const store = new Vuex.Store({})
5.将store挂到Vue实例上new Vue({ store }).$mount('#app')
-
Mutation
-
作用:本质上是一个JavaScript函数,专门用来修改State中的数据
-
通过
this.$store.state.cont=1
修改count的数据,但是会导致修改来源不明确的
问题,不利于调试和后期维护。vue官方也是不建议这样修改 -
使用步骤:
-
在Vuex中定义Mutation方法
mutations:{ mutations:{ add(state,payload){//由于mutation要修改state的数据,第一个参数永远都是state, //需要传参,第二个参数永远都是payload载荷 state.count += payload } } }
-
在组件中调用Mutation方法
-
-
Mutation必须是同步函数
载荷(Payload)
- Vuex中的载荷就是参数的意思,通过载荷可以提高Mutation方法的通用性
提交载荷
- 在组件中,可以通过
this.$store.commit()
方法的第二个参数
来提交载荷(参数) - 因为载荷只能写一个参数,所以我们一般把载荷参数写一个对象。
mapMutations辅助函数
- 基于Vuex提供的
mapMutations
辅助函数,可以方便的把Store中指定的方法,映射为当前组件的methods