vuex是什么?怎么使用?哪种功能场景使用它?
1、Vuex 是专为Vue设计的状态管理工具,采用集中式储存管理 Vue 中所有组件的状态。
2、vuex中有6个常用配置项
-state:用来存储数据
-mutations:改变state中数据的唯一途径
-actions: 存放异步方法
-getters: 类似于计算属性
-modules:存放子模块
-namespaced:true 开启命名空间,否则不能正确找到子模块
其他模块调用时:
state:
原生方法:this.$store.state.属性名
辅助函数方法:
在模块中引入:
import {mapState} from ‘vuex’
在computed中展开
computed:{
...mapState('子模块名',['属性名1',‘属性名2’],...)
}
mutations:
原生方法:this.$store.commit('子模块名/方法名',传递的值)
辅助函数方法:
在模块中引入:
import {mapMutations} from ‘vuex’
在methods中展开
methods:{
...mapMutations('子模块名',['方法名1',‘方法名2’],...)
}
actions:
原生方法:this.$store.dispatch('子模块名/方法名',传递的值)
辅助函数方法:
在模块中引入:
import {mapActions} from ‘vuex’
在methods中展开
methods:{
...mapActions('子模块名',['方法名1',‘方法名2’],...)
}
getters:
原生方法:this.$store.getters.属性名
辅助函数方法:
在模块中引入:
import {mapGetters} from ‘vuex’
在computed中展开
computed:{
...mapGetters('子模块名',['属性名1',‘属性名2’],...)
}