vuex用来全局管理vue数据,树状结构,可以分模块。
vue组件使用vuex中的数据,两种方式
》》》1.注册到根vue实例后,通过 this.$store.state
》》》2.1的方式比较冗余,可以用map映射到当前组件,直接类似使用当前组件的数据和方法
通过全局$store方式 | 通过map映射 | ||
state | 根模块 | this.$store.state.xxx | ...mapState(["xxx']); 或 ...mapState({ xxxxxx: "xxx" }); |
子模块banana | this.$store.state.banana.xxx |
...mapState({ xxxx: state => state.banana.xxx }); |
|
getter | 根模块 | ||
子模块banana | |||
mutation | 根模块 | ||
子模块banana | |||
action | 根模块 | ||
子模块banana |
getter / mutation / action参数情况:
例子 | 参数说明 | ||
getter 相当于computed,映射一些数据 |
跟模块 |
getters: { fullname (state){ return state.firstname+"."+state.lastname; } } |
state: 全局映射,可以通过(state.子模块名.子模块state名)访问子模块数据 |
子模块 | getters:{ fullname (state,getters,rootState){ ... } } |
||
mutation 修改state中的值,建议只能在这里修改 |
跟模块 | mutations: { setName (state, payload){ state.name = payload.name; } } |
|
子模块 | |||
action 一些操作,可以异步 |
跟模块 | ||
子模块 |