Vuex有state,mutation,actions,getter四种
用法如下:
1、state(存储数据):
state{
count: 0 //全局数据
}
获取state数据两种方式:
- this.$store.state.全局数据名称
- 利用辅助函数mapstate
Import {mapState} from “vuex”
computed: {
…mapstate([“全局数据名称”])
}
2、mutation(更改state数据):
mutation: {
执行函数;
}
获取mutation两种方式:
- methods: {
this.$store.commit(“执行函数名”)
}
- 导入 import {mapMutation} from “vuex”
methods: {
…mapstate(“执行函数名”)
}
3、actions(用于异步操作):
action: {
执行函数
}
Eg: actions: {
addAsync(context) {
setTimeout (() => {
//必须通过context.commit( )触发某个mutation才行
context.commit('add')
},1000)
}
}
获取actions两种方式:
- methods: {
this.$store.dispatch(“函数名”)
}
- import {mapAction} from “vuex”
methods: {
…mapAction(“函数名”)
}
4、getter(对store的数据进行加工处理,类似计算属性)
getters{
执行函数
}
获取getters两种方式:
- this.$store.getters.函数名;
- import {mapGetters} from “vuex”
computed: {
…mapGetters([“函数名”])
二、Vuex中的模块化-Module
1、为什么会有模块化?
由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store对象就有可能变得相当臃肿。
这句话的意思是,如果把所有的状态都放在State中,当项目变得越来越大的时候,vuex会变得越来越难以维护。又有了vuex的模块化
2、模块化的简单应用
应用
定义两个模块user和setting
User中管理用户的状态token
Setting中管理应用的名称name
定义child-b组件,分别显示用户的token和应用名称name
请注意:此时要获取子模块的状态需要通过$store.state.模块名字.属性名来获取
看着获取有点麻烦,我们可以通过之前学过的getters来改变一下
请注意:这个getters是根级别的getters哦
(ps:getters在main.js中引用)
通过mapGetters引用
(ps:mapGetters在子组件child-b中引用)
3、模块化中的命名空间
命名空间namespaced
这里注意理解
默认情况下,模块内部的action、mutation和getter是注册在全局命名空间的——这样使得多个模块能够对同一mutation或action作出相应。
这句话的意思是刚才的user模块还是setting模块,它的action、mutation和getter其实并没有区分,都可以直接通过全局的方式调用,如
通过mapMutations调用
但是,如果我们想保证内部模块的高封闭性,我们可以采用namespaced来进行设置
高封闭性?可以理解成**一家人如果分家了,此时,你的爸妈可以随意的进出分给你的小家,你绝得自己没什么隐私了,我们可以给自己的房门加一道锁(命名空间namespaced),你的父母再也不能进出你的小家了**
如
使用带命名空间的模块action/mutations
方案1:直接调用——带上模块的属性名路径
方案2:辅助函数——带上模块的属性名路径
方案3:createNamespacedHelpers创建基于某个命名空间辅助函数
标签:函数,getters,笔记,state,mutation,模块,Vuex,store From: https://www.cnblogs.com/tangchuye/p/17314910.html