close

State で Vuex の 管理 Vue.js- 包括的なガイドと実際の例

Vuex はアプリケーション state の管理ライブラリであり Vue.js、 component アプリケーション内の異なる 間でデータを管理および同期できるようにします。 Vuex Flux アーキテクチャを実装しているため、アプリケーションの管理が簡単かつ効率的になります state。

 

の主要な概念は Vuex 次のとおりです。

1. State

in state は、 Vuex アプリケーションの一元化されたデータ ストアを表します。 異なる 間で共有する必要があるアプリケーションのデータを保持します component。 state で を 定義する例を次に示します Vuex。 

// Vuex store  
const store = new Vuex.Store({
  state: {  
    count: 0,  
    todos: []  
  }  
});

 

2. Mutations

Mutations state 内の を変更する責任があります Vuex。 これらは、現在の値 state とペイロードを引数として受け取る同期関数です。 以下は、 で突然変異を定義する例です Vuex。 

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

 

3. Actions

Actions mutations は、非同期操作を処理し、を変更するために ディスパッチするために使用されます state。 これらには、API 呼び出し、非同期タスク、または複雑なロジックを含めることができます。 でアクションを定義する例を次に示します Vuex。 

// Vuex store  
const store = new Vuex.Store({
  state: { count: 0 },
  mutations: { /* mutations definition */ },
  actions: {  
    async fetchData({ commit }) {  
      const response = await fetch('https://api.example.com/data');  
      const data = await response.json();  
      commit('updateData', data);  
    }  
  }  
});

 

4. Getters

Getters state ストアから 派生したデータを取得して計算できるようになります Vuex。 これらは、データを に返す前にデータにアクセスして操作するのに役立ちます component。 以下にゲッターを定義する例を示します Vuex。 

// Vuex store  
const store = new Vuex.Store({
  state: { todos: [...] },
  getters: {  
    completedTodos(state) {  
      return state.todos.filter(todo => todo.completed);  
    },  
    todoCount(state) {  
      return state.todos.length;  
    }  
  }  
});

 

Vuex プロジェクトに インストールするには Vue.js 、次の手順に従います。

ステップ 1: Vuex npm または Yarn 経由で インストールします。 

npm install vuex

また 

yarn add vuex

ステップ 2: store.js  プロジェクトのルート ディレクトリにファイルを 作成します。 ここでアプリケーションを宣言し、管理します state。

ステップ 3: ファイル内で store.js  、 Vuex 新しいストア オブジェクトをインポートして作成します。 

import Vue from 'vue';  
import Vuex from 'vuex';  
  
Vue.use(Vuex);  
  
const store = new Vuex.Store({  
  // Declare your states, getters, mutations, and actions here  
});  
  
export default store;

ステップ 4: ファイル内で main.js  ストアをインポートし、Vue アプリケーションにリンクします。 

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

ステップ 5: Vuex これで、プロジェクトに インストールしてセットアップが完了しました。 ファイル内で state、 getters、 mutations、 を宣言し 、それらを Vue で使用できます 。 actions store.js component

例：

ファイルでは、 次のように store.js  単純な突然変異を宣言できます。 state 

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

Vue では、  および関数 を使用して、 および 突然変異を component 使用できます  。 state mapState mapMutations 

import { mapState, mapMutations } from 'vuex';  
  
export default {  
  computed: {  
    ...mapState(['count'])  
  },  
  methods: {  
    ...mapMutations(['increment'])  
  }  
};

これらの手順により、インストールが完了し、アプリケーション の Vuex 管理に使用できるようになります 。 state Vue.js

 

を使用すると Vuex 、アプリケーションを簡単かつ一貫して管理できます state。 データ管理への構造化されたアプローチを提供しながら、コードの保守性と再利用性を強化します。