快捷導(dǎo)航

詳解在Vue中如何模塊化使用Vuex

更新時(shí)間：2024年01月24日 11:56:41 作者：JacksonChen_

這篇文章給大家介紹了在Vue 中如何模塊化使用 Vuex,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下

正常使用

// src/store/index.js
 
import Vue from 'vue';
import Vuex from 'vuex';
 
Vue.use(Vuex);
 
export default new Vuex.Store({
  state: {
    count: 0, // 一個(gè)簡(jiǎn)單的狀態(tài)示例
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    },
  },
  actions: {
    increment(context) {
      context.commit('increment');
    },
    decrement(context) {
      context.commit('decrement');
    },
  },
  getters: {
    getCount: state => state.count,
  },
});

在組件中使用 Vuex： 在需要訪(fǎng)問(wèn)或修改狀態(tài)的組件中，你可以使用Vuex提供的輔助函數(shù)。

// src/components/Counter.vue
 
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>
 
<script>
import { mapState, mapActions } from 'vuex';
 
export default {
  computed: {
    ...mapState(['count']),
  },
  methods: {
    ...mapActions(['increment', 'decrement']),
  },
};
</script>

模塊化使用

優(yōu)點(diǎn)

在個(gè)人小項(xiàng)目當(dāng)中，不使用模塊化沒(méi)什么問(wèn)題，但是在公司或者大型項(xiàng)目下就需要使用模塊化管理，使用模塊化有利于可維護(hù)性、團(tuán)隊(duì)協(xié)作、代碼結(jié)構(gòu)清晰、提高可讀性等優(yōu)點(diǎn)。

假設(shè)你有兩個(gè)模塊，一個(gè)用于管理用戶(hù)信息，另一個(gè)用于管理商品信息。

首先，分別創(chuàng)建兩個(gè) Vuex 模塊文件：

模塊文件

userModule.js

// userModule.js
const state = {
  user: null,
  userName:"張三"
};
 
const mutations = {
  SET_USER(state, user) {
    state.user = user;
  },
};
 
const actions = {
  setUser({ commit }, user) {
    commit("SET_USER", user);
  },
};
 
export default {
  namespaced: true,
  state,
  mutations,
  actions,
};

productModule.js

// productModule.js
const state = {
  products: [],
  productName:'電腦'
};
 
const mutations = {
  ADD_PRODUCT(state, product) {
    state.products.push(product);
  },
};
 
const actions = {
  addProduct({ commit }, product) {
    commit("ADD_PRODUCT", product);
  },
};
 
export default {
  namespaced: true,
  state,
  mutations,
  actions,
};

集中模塊的狀態(tài)到 Getters，方便頁(yè)面中使用

在根級(jí) Vuex Store 中創(chuàng)建 Getters，用于集中所有模塊的狀態(tài)數(shù)據(jù)：

getters.js

// getters.js
export default {
  userName: state => state.user.userName,
  productName: state => state.product.productName,
};

創(chuàng)建根級(jí)的 Vuex Store 文件，將上述的模塊引入并注冊(cè)：

store.js

import Vue from 'vue';
import Vuex from 'vuex';
import userModule from './userModule';
import productModule from './productModule';
import getters from './getters'; // 導(dǎo)入 getters 為對(duì)象
 
Vue.use(Vuex);
 
const store = new Vuex.Store({
  modules: {
    user: userModule,
    product: productModule,
  },
  getters,
});
 
export default store;

頁(yè)面使用

<template>
  <div>
    <h1>User Name: {{ userName }}</h1>
  </div>
</template>
 
<script>
export default {
  computed: {
    userName() {
      return this.$store.getters.userName;
    }
  },
  mounted() {
    this.$store.dispatch("user/setUser", { userName: "John Doe" });
    this.$store.dispatch("product/addProduct", { name: "Product A" });
  },
};
</script>

到此這篇關(guān)于詳解在Vue中如何模塊化使用Vuex的文章就介紹到這了,更多相關(guān)Vue模塊化使用Vuex內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: