当前位置：首页 > article >正文

简单说明vuex

article 2024/11/5 14:23:36

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(() => {
          // 最终还是使用的commit
          context.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')`
    })
  }
}