vuex是什么?怎么使用?哪种功能场景使用它?

124 阅读1分钟

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’],...)

}