vue3.4.15ストア操作ガイド 保存、取得、更新、削除の使...
Vue.js 3のストア（Vuex）を操作するための基本的なガイドを以下に示します。これにはストアにデータを保存、取得、更新、削除するための一般的な操作が含まれます。Vuexを使用する前に、まずはVue.jsおよびVuexをプロジェクトに導入していることを確認してください。[*]ストアの作成
[*]1.src/store/index.js などに、Vuexストアを作成します。
[*]// src/store/index.js
import { createStore } from 'vuex';
export default createStore({
state: {
// データを保存する状態
exampleData: null,
},
mutations: {
// 状態を更新するためのミューテーション
setExampleData(state, newData) {
state.exampleData = newData;
},
},
actions: {
// ミューテーションを呼び出すためのアクション
updateExampleData({ commit }, newData) {
commit('setExampleData', newData);
},
},
getters: {
// 状態を取得するためのゲッター
getExampleData: state => state.exampleData,
},
});
2.Vueコンポーネントでの使用
[*]コンポーネントでストアを使用するには、store オプションを使います。
[*]// src/App.vue などのコンポーネントファイル
<script>
export default {
methods: {
// データを更新するメソッド
updateData() {
this.$store.dispatch('updateExampleData', '新しいデータ');
},
},
computed: {
// データを取得する計算プロパティ
exampleData() {
return this.$store.getters.getExampleData;
},
},
};
</script>
3.データの保存（Mutationを使用）
[*]ストア内のデータを変更するためには、ミューテーションを使用します。
[*]// コンポーネントのメソッド内で呼び出す例
this.$store.commit('setExampleData', '新しいデータ');
[*]4.データの取得（Getterを使用）
[*]ストア内のデータを取得するためには、ゲッターを使用します。
[*]// コンポーネントの計算プロパティ内で使用する例
this.$store.getters.getExampleData;
5.データの更新（Actionを使用）
[*]非同期処理や複雑なロジックが必要な場合、アクションを使用してミューテーションを呼び出します。
[*]// コンポーネントのメソッド内で呼び出す例
this.$store.dispatch('updateExampleData', '新しいデータ');
6.データの削除
[*]ミューテーションを使ってデータを初期化するか、リセットすることができます。
[*]// ミューテーションを使ってデータを初期化する例
mutations: {
resetExampleData(state) {
state.exampleData = null;
},
}
// コンポーネントのメソッド内で呼び出す例
this.$store.commit('resetExampleData');
これで、基本的なストアの操作ができるようになりました。これは基本的な例であり、プロジェクトの要件に応じてより複雑なストアの設定ができます。
页:
[1]