vue3.4.15ストア操作ガイド 保存、取得、更新、削除の使...

老司机

Vue.js 3のストア（Vuex）を操作するための基本的なガイドを以下に示します。これにはストアにデータを保存、取得、更新、削除するための一般的な操作が含まれます。Vuexを使用する前に、まずはVue.jsおよびVuexをプロジェクトに導入していることを確認してください。

• ストアの作成
  
  
  • 1.src/store/index.js などに、Vuexストアを作成します。
  • 1. // src/store/index.js
       
    2. import { createStore } from 'vuex';
       
    3. 
       
    4. export default createStore({
       
    5.   state: {
       
    6.     // データを保存する状態
       
    7.     exampleData: null,
       
    8.   },
       
    9.   mutations: {
       
    10.     // 状態を更新するためのミューテーション
        
    11.     setExampleData(state, newData) {
        
    12.       state.exampleData = newData;
        
    13.     },
        
    14.   },
        
    15.   actions: {
        
    16.     // ミューテーションを呼び出すためのアクション
        
    17.     updateExampleData({ commit }, newData) {
        
    18.       commit('setExampleData', newData);
        
    19.     },
        
    20.   },
        
    21.   getters: {
        
    22.     // 状態を取得するためのゲッター
        
    23.     getExampleData: state => state.exampleData,
        
    24.   },
        
    25. });
        

    复制代码
    2.Vueコンポーネントでの使用
    
    
    • コンポーネントでストアを使用するには、store オプションを使います。
    • 1. // src/App.vue などのコンポーネントファイル
         
      2. <script>
         
      3. export default {
         
      4.   methods: {
         
      5.     // データを更新するメソッド
         
      6.     updateData() {
         
      7.       this.$store.dispatch('updateExampleData', '新しいデータ');
         
      8.     },
         
      9.   },
         
      10.   computed: {
          
      11.     // データを取得する計算プロパティ
          
      12.     exampleData() {
          
      13.       return this.$store.getters.getExampleData;
          
      14.     },
          
      15.   },
          
      16. };
          
      17. </script>
          

      复制代码
      3.データの保存（Mutationを使用）
      
      
      • ストア内のデータを変更するためには、ミューテーションを使用します。
      • 1. // コンポーネントのメソッド内で呼び出す例
           
        2. this.$store.commit('setExampleData', '新しいデータ');
           

        复制代码
        
        
      • 4.データの取得（Getterを使用）
        
        
        • ストア内のデータを取得するためには、ゲッターを使用します。
        • 1. // コンポーネントの計算プロパティ内で使用する例
             
          2. this.$store.getters.getExampleData;
             

          复制代码
          5.データの更新（Actionを使用）
          
          
          • 非同期処理や複雑なロジックが必要な場合、アクションを使用してミューテーションを呼び出します。
          • 1. // コンポーネントのメソッド内で呼び出す例
               
            2. this.$store.dispatch('updateExampleData', '新しいデータ');
               

            复制代码
            6.データの削除
            
            
            • ミューテーションを使ってデータを初期化するか、リセットすることができます。
            • 1. // ミューテーションを使ってデータを初期化する例
                 
              2. mutations: {
                 
              3.   resetExampleData(state) {
                 
              4.     state.exampleData = null;
                 
              5.   },
                 
              6. }
                 
              7. // コンポーネントのメソッド内で呼び出す例
                 
              8. this.$store.commit('resetExampleData');
                 

              复制代码
              これで、基本的なストアの操作ができるようになりました。これは基本的な例であり、プロジェクトの要件に応じてより複雑なストアの設定ができます。