Vuex是什么?
Vuex是vue项目中实现大范围数据共享的技术方案.
作用:能够方便且高效的实现组件之间的数据共享
使用Vuex的好处
1.数据的存取一步到位,不需要层层传递
2.数据的流动非常清晰
3.存储在Vuex中的数据都是响应式的
封装Store模块的实现步骤如下
1.导入Vue和Vuex依赖包
import Vue from 'vue'
import Vuex from 'vuex'
2.把Vuex安装为Vue的插件
Vue.use(Vuex)
3.创建store的实例对象
const store = new Vuex.Store({})
4.向外共享store的实例对象
export default store
Store模块里面的核心成员
1. State / state
作用:定义全局数据,本质就是一个对象
第一种访问方式:
在组件内使用this.$store.state.count访问数据
第二种访问方式:
1.按需导入辅助函数mapState
import {mapState} from 'vuex'
2.把需要的全局数据映射为当前组件的计算属性
computed:{
...mapState(['count'])
}
mapState()函数的返回值是一个对象
2.Mutation / mutations
本质上是JavaScript函数,专门用来变更Store中的数据
特点:想要修改State中的数据,只能调用Mutation方法
好处:能够确保修改来源的唯一性,方便调试和后期维护
使用步骤:
在Vuex中定义Mutation方法
在组件中调用Mutation方法
**所有mutations函数,第一个参数一定是state**
在组件中可以通过this.$store.commit()方法的第二个参数来提交载荷(参数)
一般情况推荐命名为payload
如果需要传递多个参数可以使用对象或者数组传递
mapMutation辅助函数的用法示例
按需导入
import {mapMutation} from 'vuex'
从vuex中把add映射为当前组件的methods方法
methods:{
...mapMutation(['add'])
}
3.Action / actions
本质上是JavaScript函数,专门用来处理Vuex中的异步操作
在组件中,通过this.$store.dispatch('xxx')方法,即可触发指定名称的Action方法
所有actions函数的第一个参数一定是context,它可以调用commit来触发mutations函数执行
在Action中定义载荷
在Action方法中,可以通过第二个形参的位置来定义载荷参数
actions:{
asyncAdd(context,payload){
setTimeout(function(){
context.commit('add',payload)
},1000)
}
}
通过this.$store.dispatch()方法的第二个参数,即可提交载荷
this.$store.dispatch('asyncAdd',{num:1})
用法其实和mutations一模一样
辅助函数的使用也和mutations一模一样
4.Getter / getters
本质上是JavaScript函数
作用:它是Vuex中的计算属性,当Store数据源发生变化的时候,Getter的返回值会自动更新
所有getters函数的第一个参数一定是state
mapGetters辅助函数的用法
按需导入
import {mapGetters} from 'vuex'
computed:{
...mapGetters(['isAllDone'])
}
5.Module / modules
表示按照模块化的开发思想把Vuex中不同的数据和方法按照彼此的关系联系进行封装
定义模块
每个模块都是彼此独立的,都可以拥有自己的state/mutations/actions/getters节点
怎样使用modules对象注册模块?
`模块的注册名称:导入的模块对象`
命名空间(namespaced)
可以解决不同模块之间成员名称冲突的问题
开启命名空间
在定义模块时,只需要在模块的根节点中声明namespaced:true选项就可以为当前模块开启命名空间
当模块启用这个选项之后,模块内的成员就需要通过模块的注册名称才能访问到
在组件中访问命名空间下的数据时建议使用辅助函数来简化访问过程
