Vueのシンプルストアの詳しい説明

Vue におけるストアの最も単純な応用はグローバルストレージです。

ここでは、相互にジャンプするために 2 つのコンポーネント ( Helloworld.vueとtwopage.vue ) を使用します。前者はストアにデータを格納するために使用され、後者はストアからデータを取得するために使用されます。

まず、vuex をインストールする必要があります: npm install vuex --save ;

ジャンプする必要があるので、ルーターをインストールする必要があります: npm install vue-router --save

新しいストアフォルダーを作成し、その中に新しいモジュールフォルダー、 getters.js 、 index.jsを作成します。

モジュール内にmystate.jsを作成する

ここに画像の説明を挿入

変数 msg を mystate に配置します。

定数状態 = {
    メッセージ: 「これが私のステータスです」
}
エクスポートデフォルト{
    州
}

ゲッターは、操作する変数のキーと値のペアを保持します。

const ゲッター = {
    メッセージ:状態 => state.mystate.msg、
}
デフォルトのゲッターをエクスポートする

インデックスはvuex.store設定と作成に使用されます。

'vue' から Vue をインポートします
'vuex' から Vuex をインポートします
'./getters' からゲッターをインポートします
Vue.use(Vuex)
// https://webpack.js.org/guides/dependency-management/#requirecontext
const modulesFiles = require.context('./modules', true, /\.js$/)
// モジュールファイル内のすべての vuex モジュールが自動的に必要になります // `import app from './modules/app'` は必要ありません
// モジュールファイルからすべての vuex モジュールを自動的に要求します
const モジュール = modulesFiles.keys().reduce((モジュール、モジュールパス) => {
  // './app.js' を 'app' に設定
  定数 moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  定数値 = modulesFiles(modulePath)
  モジュール[モジュール名] = 値.default
  リターンモジュール
}, {})
定数ストア = 新しい Vuex.Store({
  モジュール、
  ゲッター、
})
デフォルトストアをエクスポート

main.jsの vue インスタンスで store と router を呼び出す必要があります (2 つのページのルートについては後述します)。

'vue' から Vue をインポートします
'vuex' から Vuex をインポートします
'./getters' からゲッターをインポートします
Vue.use(Vuex)
// https://webpack.js.org/guides/dependency-management/#requirecontext
const modulesFiles = require.context('./modules', true, /\.js$/)
// モジュールファイル内のすべての vuex モジュールが自動的に必要になります // `import app from './modules/app'` は必要ありません
// モジュールファイルからすべての vuex モジュールを自動的に要求します
const モジュール = modulesFiles.keys().reduce((モジュール、モジュールパス) => {
  // './app.js' を 'app' に設定
  定数 moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  定数値 = modulesFiles(modulePath)
  モジュール[モジュール名] = 値.default
  リターンモジュール
}, {})
定数ストア = 新しい Vuex.Store({
  モジュール、
  ゲッター、
})
デフォルトストアをエクスポート

routerの下のindex.jsに 2 つのルートを設定します。

'vue' から Vue をインポートします
'vuex' から Vuex をインポートします
'./getters' からゲッターをインポートします
Vue.use(Vuex)
// https://webpack.js.org/guides/dependency-management/#requirecontext
const modulesFiles = require.context('./modules', true, /\.js$/)
// モジュールファイル内のすべての vuex モジュールが自動的に必要になります // `import app from './modules/app'` は必要ありません
// モジュールファイルからすべての vuex モジュールを自動的に要求します
const モジュール = modulesFiles.keys().reduce((モジュール、モジュールパス) => {
  // './app.js' を 'app' に設定
  定数 moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  定数値 = modulesFiles(modulePath)
  モジュール[モジュール名] = 値.default
  リターンモジュール
}, {})
定数ストア = 新しい Vuex.Store({
  モジュール、
  ゲッター、
})
デフォルトストアをエクスポート

App.vue のルートビューを使用します。

<テンプレート>
  <div id="アプリ">
   <ルータービュー></ルータービュー>
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  名前: 'アプリ'
}
</スクリプト>
<スタイル>
＃アプリ {
  フォントファミリ: 'Avenir'、Helvetica、Arial、sans-serif;
  -webkit-font-smoothing: アンチエイリアス;
  -moz-osx-font-smoothing: グレースケール;
  テキスト配置: 中央;
  色: #2c3e50;
  上マージン: 60px;
}
</スタイル>

最後に、 HelloWorld.vueという 2 つのページコンポーネントがあります。

msg の双方向バインディングと監視。msg の新しい値をグローバル変数に格納します。

トリガーを監視するメソッドは setstate です。

sessionStorage.setItem('msg', value)は、 getters.jsに格納されているキーと値のペアである msg というキーに対応する値に value の値を格納するために使用されます。

<テンプレート>
  <div class="hello">
    <img src="../assets/logo.png" />
    <br />
    <input v-model="msg"/>
    <h2>{{ メッセージ }}</h2>
    <router-link to="/two">2ページ目へ移動します</router-link>
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  名前: "HelloWorld",
  データ（） {
    戻る {
      メッセージ: 「新しい Vue プロジェクトへようこそ」
    };
  },
  メソッド: {
    setstate(値) {
      sessionStorage.setItem('msg', 値);
    },
  },
  時計：
    メッセージ(新しい名前、古い名前) {
      this.setstate(新しい名前);
    },
  },
};
</スクリプト>
<!-- CSS をこのコンポーネントのみに制限するために "scoped" 属性を追加します -->
<スタイルスコープ>
{
  色: #42b983;
}
</スタイル>

2 番目のページコンポーネントtwopage.vueでは、保存されたメッセージを取り出す必要があります。

sessionStorage.getItem('msg') msg キーに対応する値を取得します。

<テンプレート>
  <div>
    これは2ページ目です<h2>{{ msg }}</h2>
    <router-link to="/">戻りたい</router-link>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  データ（） {
    戻る {
      メッセージ: "",
    };
  },
  メソッド: {
    メッセージを設定する() {
        this.msg = sessionStorage.getItem('msg');
    },
  },
  作成された(){
      this.setmsg()
  }
};
</スクリプト>

ディレクトリ構造:

ここに画像の説明を挿入