模块基本准则
- 单一职责
- 高内聚低耦合
- 易用性
- 安全性
安装依赖
npm i vuex --save => npm install vuex --save
创建对应文件
import Vue from "vue";
import Vuex from "vuex";
import getters from "./getters";
import modules from "./modules";
Vue.use(Vuex);
export default new Vuex.Store({
namespaced: true, //启用命名空间
getters, //放着常用的属性 可以解决路径变短
modules,
});
stores/modules/user.js
export default {
namespaced: true,
state: {
count: 0, //定义值
token: "",
},
getters: {
/** 属于计算属性 */
getInfo(state) {
return state.count;
},
},
mutations: {
/** 同步方法 */
setCount(state, payload) {
state.count = payload;
},
handlerCount(state, payload) {
state.count = +payload;
},
increment(state, payload) {
state.count += payload;
console.log(state.count);
},
},
actions: {
/** 异步方法
* @param {dispatch,commit}
* 派发 提交
*/
increment({ dispatch, commit }, payload) {
console.log(dispatch, commit);
commit("increment", payload);
},
},
};
在文件中使用
<template>
<div id="app">
<h1>基础模式</h1>
<p>Current Count: {{ $store.state.user.count }}</p>
<p>Computed Info: {{ $store.getters["user/getInfo"] }}</p>
<button @click="incrementCount1(1)">Increment by 1</button>
<button @click="updateCount5(5)">Set Count to 5</button>
<br />
<h1>函数结构模式</h1>
<p>Current Count: {{ count }}</p>
<p>Computed Info: {{ getInfo }}</p>
<button @click="incrementCount(1)">Increment by 1</button>
<button @click="updateCount(5)">Set Count to 5</button>
<h1>双向绑定的计算属性</h1>
<input v-model="computedCount" />
</div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
name: "App",
mounted() {
console.log(this.$store);
},
computed: {
/** mapState, mapGetters,前面是模块名称,后面是属性可对象可数组 */
/**
* 将 Vuex 模块 "user" 中的状态 (state) 映射为组件的计算属性 (computed properties)。
* 这使得你可以像使用普通的组件数据属性一样访问 Vuex 状态。
*
* mapState 函数:
* - 将 Vuex 模块 "user" 的 `count` 状态映射为组件的 `count` 计算属性。
*/
...mapState("user", ["count"]),
/**
* 将 Vuex 模块 "user" 中的 getter 映射为组件的计算属性。
* 这使得你可以直接在组件中访问 Vuex 的 getter 结果。
*
* mapGetters 函数:
* - 将 Vuex 模块 "user" 的 `getInfo` getter 映射为组件的 `getInfo` 计算属性。
*/
...mapGetters("user", ["getInfo"]),
computedCount: {
get() {
return this.count;
},
set(value) {
this.$store.commit("user/handlerCount", value);
},
},
},
methods: {
/**
* 第一种方法结构获取 (First Method Structure)
*
* 使用 mapMutations 和 mapActions 辅助函数来映射 store 模块中的 mutations 和 actions 到组件的 methods 中。
* 使用这种方法，你可以直接调用方法，而不需要通过 this.$store 对象。
*/
// 使用 mapMutations 将 "user" 模块中的 "updateCount" mutation 映射到组件的 "updateCount" 方法中
...mapMutations("user", ["updateCount"]),
// 使用 mapActions 将 "user" 模块中的 "increment" action 映射到组件的 "increment" 方法中
...mapActions("user", ["increment"]),
/**
* incrementCount(value)
*
* 调用映射到组件的 "increment" 方法，这实际上触发了 "user" 模块中的 "increment" action，
* 并传递了参数 value。
* @param {Number} value - 要增加的数值
*/
incrementCount(value) {
this.increment(value);
},
/**
* updateCount(value)
*
* 调用映射到组件的 "updateCount" 方法，这实际上触发了 "user" 模块中的 "updateCount" mutation，
* 并传递了参数 value。
* @param {Number} value - 要设置的计数值
*/
updateCount(value) {
this.updateCount(value);
},
/**
* incrementCount1(value)
*
* 通过 this.$store.dispatch 手动触发 "user" 模块中的 "increment" action。
* 这是第一种方法的等效方式，但使用的是直接访问 this.$store 对象。
* @param {Number} value - 要增加的数值
*/
incrementCount1(value) {
this.$store.dispatch("user/increment", value);
},
/**
* updateCount5(value)
*
* 通过 this.$store.commit 手动触发 "user" 模块中的 "updateCount" mutation。
* 这是第一种方法的等效方式，但使用的是直接访问 this.$store 对象。
* @param {Number} value - 要设置的计数值
*/
updateCount5(value) {
this.$store.commit("user/updateCount", value);
},
},
};
</script>
