vuex
- 知识结构
- 配置
- 调用
知识结构
vue用于管理公共数据的仓库
配置
-
state:所有公共数据的初始状态(初始值)
export default {state: {count: 0,} };
-
mutations:修改state内容的方法(必须为同步方法)
export default {state: {count: 0,},mutations: {increase(state,payload){state.count += payload;}} };
-
actions:修改state内容的异步相关方法,也需要通过mutations中的方法进行最终修改
export default {state: {count: 0,},mutations: {increase(state,payload){state.count += payload;}},actions: {asycIncrease(context,payload){setTimeout(() => {context.commit('increase',10);}, 1000)}} };
-
getters:仓库内的计算属性
export default {state: {count: 0,},mutations: {increase(state,payload){state.count += payload;}},actions: {asycIncrease(context,payload){setTimeout(() => {context.commit('increase',10);}, 1000)}},getters: {power (state) {return state.count ** state.count;}} };
-
modules:在仓库内容过多时,避免命名重复或为了结构清晰,可以分为不同的module以此来区分
// 在创建仓库时配置 const store = createStore({modules: {a: moduleA,b: moduleB} })
-
完整示例配置
// store配置 import Vuex from "vuex"; import Vue from "vue"; import count from "./count"; import abc from "./abc"; Vue.use(Vuex);const store = new Vuex.Store({modules: {count,abc,},strict: true, // 开启严格模式 });export default store;
// count module 配置 export default {// namespaced: true, // 开启命名空间state: {count: 0,},mutations: {increase(state,payload){state.count += payload;}},actions: {asycIncrease(context,payload){setTimeout(() => {context.commit('increase',10);}, 1000)}},getters: {power (state) {return state.count ** state.count;}} };
// abc module 配置 export default {state: {abc: '',},mutations: {set(state,payload){state.abc = payload;}},actions: {asycIncrease(context,payload){setTimeout(() => {// 最终还是使用的commitcontext.commit('set',"well");}, 1000)}} };
-
strict: true,开启严格模式
规定state中的状态只能通过mutations中的方法改变,但是其实也可以直接使用
this.$store.state.count = 1
这种改变状态,开启严格模式后使用直接赋值时就会报错 -
namespaced: true,开启命名空间
当不同module中有同名的方法时,直接commit就容易混乱,打开命名空间后,调用方法就必须加上此module名作为前缀,如下:
import Vue from "vue"; import store from "./store";const num = store.getters["count/power"];
调用
-
commit
用于调用mutations中的方法
<template><div><div id="button"><button @click="handleClick">button</button></div></div> </template><script> import Vue from "vue"; import store from "./store"; export default {methods: {handleClick(){store.commit("count/increase",1);}}, }; </script>
-
dispatch
用于调用异步方法
<template><div><div id="button"><button @click="handleClick">button</button></div></div> </template><script> import Vue from "vue"; import store from "./store"; export default {methods: {handleClick(){store.dispatch("count/asycIncrease",2);}}, }; </script>
-
mapState:用于让我们方便的使用计算属性封装state,有多种写法
import { mapState } from 'vuex'export default {computed: mapState({count: state => state.count,}) }export default {computed: {count: ...mapState("count", ["count"]);} }
-
mapGetters:将 store 中的 getter 映射到局部计算属性,这种map函数几乎都是这样的作用
import { mapGetters } from 'vuex'export default {computed: {// 使用对象展开运算符将 getter 混入 computed 对象中...mapGetters('count',['power'])} }
-
mapMutations:简化函数封装
import { mapMutations } from 'vuex'export default {// ...methods: {...mapMutations('count',['increase', // 将 `this.increase()` 映射为 `this.$store.commit('increase')`]),} }
-
mapActions:简化异步方法封装
import { mapActions } from 'vuex'export default {methods: {...mapActions('count',['asycIncrease', // 将 `this.asycIncrease()` 映射为 `this.$store.dispatch('asycIncrease')`})} }