Vueのシンプルな状態管理ストアモードを理解する方法

概要

ストア状態管理モードの実装の考え方は非常にシンプルで、共有データを格納するための状態属性を持つストアオブジェクトと、これらの共有データを操作するメソッドを定義することです。コンポーネントでは、store.state 共有データがデータの一部または全部として使用されます。store.state オブジェクト内の共有データを変更する場合は、ストアが提供するインターフェイスを呼び出して共有データを変更する必要があります。

以下は、ストア状態管理モードを紹介する簡単な ToDo リストデモです。

1. store.jsを定義する

//ストア.js
エクスポートconstストア = {
    州： {
        すべて:
            {text: '中国語の宿題を書く', done: false},
            {text: '数学のテストを行う'、完了: false}
        ]
    },
    追加Todo(str){
        const obj = {テキスト: str、完了: false}
        this.state.todos.push(obj)
    },
    setDone(インデックス){
        this.state.todos[index].done = true
    }
}

2. store.js を使用するコンポーネント

//A.vue
<テンプレート>
    <div class="A">
        私はコンポーネントAです<ul>
           <li v-for="(todo,index) 内の todos" 
           :key="index" :class="todo.done?'done':''" @click="setDone(index)">
           {{todo.text}}
           </li>
       </ul>
    </div>
</テンプレート>

<スクリプト>
'../store/store.js' から {store} をインポートします。
エクスポートデフォルト{
    名前: 'A'、
    データ（）{
        ストアの状態を返す
    },
    メソッド: {
        setDone(インデックス){
            ストア.setDone(インデックス)
        }
    }
}
</スクリプト>

<スタイルスコープ>
.A{
    背景: 赤;
    色: 白;
    パディング: 20px;
}
.A li.done{
    背景: 緑;
}
</スタイル>

//B.ビュー
<テンプレート>
    <div class="B">
        <div>
            私はコンポーネント B です。下の入力ボックスにタスクを入力し、コンポーネント A にタスクを追加します</div>
        <input type="text" v-model="text">
        <button @click="addTodo">ToDo を追加</button>
    </div>
</テンプレート>

<スクリプト>
'../store/store.js' から {store} をインポートします。
エクスポートデフォルト{
    名前: 'B'、
    データ（）{
        戻る {
            文章： ''
        }
    },
    方法:{
        追加ToDo(){
            if(this.text){
                store.addTodo(このテキスト)
            }
        }
    }
}
</スクリプト>

<スタイルスコープ>
.B{
    背景: 黄色;
    パディング: 20px;
}
</スタイル>

//アプリ.vue
<テンプレート>
  <div id="アプリ">
    <あ />
    <B />
  </div>
</テンプレート>

<スクリプト>

'./components/A.vue' から A をインポートします。
'./components/B.vue' から B をインポートします。

エクスポートデフォルト{
  名前: 'アプリ'、
  コンポーネント:
    あ、
    B
  }
}
</スクリプト>