Vuex使用實例

一、vlookup使用實例

vlookup是excel中一種非常常用的函數，它的作用是在一個數據庫中查找某個值的位置，並返回其相對應的值。同樣，在Vuex中也存在一種類似的查找方式，我們可以使用getter來獲取store中的某個值。

const store = new Vuex.Store({
  state: {
    fruits: ['apple', 'banana', 'pineapple']
  },
  getters: {
    getFruitByName: (state) => (name) => {
      return state.fruits.find(fruit => fruit === name);
    }
  }
});

console.log(store.getters.getFruitByName('banana')); // 'banana'

在上述代碼中，我們定義了一個getter函數getFruitByName，它接收一個參數name，並返回與之相同的水果名稱。通過在組件中使用store.getters.getFruitByName()方法，我們可以獲取store中對應的水果名稱。

二、Vuex使用原理

Vuex是一個狀態管理庫，用於在Vue應用程序中共享狀態。它通過在根組件上開設一個全局的store，存儲和更新應用程序的狀態，所有的子組件都可以通過getter和mutation來訪問和修改store中的數據。

Vuex的原理和流程如下：

1. 首先，我們在根組件上引入了Vuex庫，並通過new Vuex.Store()方法實例化一個store對象。
2. 在store對象中，我們可以定義state、getter、mutation、action等屬性和方法來管理整個應用程序的狀態。
3. 在組件中，我們可以通過computed屬性來訪問store中的state或getter，通過methods屬性來調用mutation或action來修改或獲取store中的數據。
4. 當我們調用mutation或action時，它們會對store中的state進行修改，進而觸發所有與該狀態相關的組件更新。

三、Vuex使用示例

下面我們來看一個簡單的Vuex使用示例，該示例演示了如何在Vue組件中使用Vuex來管理整個應用程序的狀態。

<!-- App.vue -->
<template>
  <div>
    <h1>{{ $store.state.count }}</h1>
    <button @click="$store.commit('increment')">+</button>
    <button @click="$store.commit('decrement')">-</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment');
    },
    decrement() {
      this.$store.commit('decrement');
    }
  }
}
</script>

<!-- main.js -->
import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue'

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    }
  }
});

new Vue({
  render: h => h(App),
  store:store
}).$mount('#app')

在上述代碼中，我們定義了一個簡單的計數器應用程序，通過點擊+和-按鈕來修改count值。

在App.vue組件中，我們通過$store.state.count來獲取store中的count狀態，並通過$store.commit方法來調用mutation方法來更新store中的數據。

在main.js中，我們首先通過import導入Vue和Vuex庫，然後實例化一個Vuex.Store對象，將之傳入Vue實例中，通過$store來全局使用Vuex中的狀態管理機制。

四、Vuex使用步驟

使用Vuex來管理Vue應用程序的狀態需要經過以下幾個步驟：

1. 引入Vuex庫，並在Vue中註冊。
2. 實例化一個Vuex.Store對象，定義state、getter、mutation、action等屬性和方法。
3. 在Vue實例中註冊store對象，在組件中通過$store來訪問或更新Vuex的狀態。

五、Vuex的使用方式

Vuex支持多種使用方式，包括以下幾種：

1. 通過getter獲取store中的狀態。
2. 通過mutation修改store中的狀態。
3. 通過action異步修改store中的狀態。
4. 通過module來劃分store的模塊。

六、Vuex使用方法及應用場景

Vuex是一個非常強大的狀態管理庫，它在Vue應用程序中可以用來管理數據狀態、異步請求等業務邏輯。Vuex使用方法和應用場景如下：

1. 收集數據狀態：Vuex可以在全局的store中存儲和管理整個應用程序的狀態，方便在多個組件之間共享數據。
2. 訪問數據狀態：通過getter函數，我們可以方便地獲取store中的狀態數據，使得組件之間可以快速地共享和訪問數據。
3. 異步操作數據：通過action函數，我們可以異步地操作store中的數據狀態，並在異步操作完成之後，利用mutation函數更新store中的數據，使得整個應用程序可以更加的響應式和流暢。
4. 劃分模塊：當我們的應用程序變得越來越複雜時，我們可以通過module函數來劃分store的模塊，方便對不同的模塊進行管理和調試。

七、Vuex的使用案例

下面我們來看一個Vuex的使用案例，該案例演示了如何使用Vuex來實現購物車的功能。

const store = new Vuex.Store({
  state: {
    cart: []
  },
  getters: {
    total(state) {
      return state.cart.reduce((total, item) => total + item.price * item.count, 0);
    },
    cart(state) {
      return state.cart.map(item => ({
        ...item,
        total: item.price * item.count
      }));
    }
  },
  mutations: {
    addToCart(state, payload) {
      const item = state.cart.find(item => item.id === payload.id);
      if (item) {
        item.count++;
      } else {
        state.cart.push({
          ...payload,
          count: 1
        });
      }
    },
    removeItem(state, payload) {
      const index = state.cart.findIndex(item => item.id === payload.id);
      state.cart.splice(index, 1);
    }
  },
  actions: {
    addItemToCart({ commit }, payload) {
      commit('addToCart', payload);
    }
  }
});

在上述代碼中，我們定義了一個簡單的購物車Vue程序，通過Vuex來管理整個應用程序的狀態。通過state、mutations、getter和action等函數，我們實現了以下的購物車功能：

1. 點擊”加入購物車”按鈕，該商品將添加到store的cart數組中。
2. 點擊”刪除”按鈕，該商品將從store的cart數組中刪除。
3. 計算出購物車中的商品總價和數量。

通過Vuex的狀態管理功能，我們可以輕鬆地管理整個應用程序的狀態，並在組件之間方便地傳遞、共享和訪問數據。

八、使用vue3實現一個modal

下面我們來看一個使用Vue3和Vuex來實現modal彈框組件的實例。該組件可以全局使用，可以方便地呼出和關閉modal彈框界面。

<!-- Modal.vue -->
<template>
  <div v-if="modalShow" class="modal">
    <div class="modal-inner">
      <h2 class="modal-title">{{ title }}</h2>
      <div class="modal-content">
        <slot></slot>
      </div>
      <button @click="closeModal" class="modal-close">X</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Modal',
  computed: {
    modalShow() {
      return this.$store.state.modalShow;
    },
    title() {
      return this.$store.state.modalTitle;
    }
  },
  methods: {
    closeModal() {
      this.$store.commit('closeModal');
    }
  }
}
</script>

<style scoped>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-inner {
  position: relative;
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  width: 80%;
  max-width: 500px;
}

.modal-title {
  margin-top: 0;
  margin-bottom: 10px;
}

.modal-content {
  margin-bottom: 20px;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  background-color: transparent;
  font-size: 20px;
  cursor: pointer;
}
</style>

<!-- main.js -->
import { createApp } from 'vue';
import store from './store';
import App from './App.vue';
import Modal from './Modal.vue';

const app = createApp(App);
app.use(store);
app.component('Modal', Modal);
app.mount('#app');

在上述代碼中，我們定義了一個簡單的Modal組件來實現modal彈框效果。該組件使用Vuex來管理整個應用程序的狀態，通過$store來獲取和更新modal狀態。

在Modal.vue組件中，我們通過computed屬性來訪問和獲取store中的modalState和modalTitle狀態，通過methods屬性來調用store.commit方法來更新store中的modalState狀態。在style標籤中，我們定義了modal的樣式，使其居中和覆蓋整個屏幕。

在main.js中，我們首先創建一個Vue應用程序，並掛載到#app標籤上，然後通過app.use(store)將store對象註冊到Vue應用程序中，通過app.component方法來註冊Modal組件，在App.vue中使用<Modal v-if=”$store.state.modalShow” />來呼出和關閉modal彈框界面。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/280757.html