1 つの記事で Vuex を理解する

'vue' から Vue をインポートします。
'vuex' から Vuex をインポートします。


Vue.js で Vuex をビルドします。
定数状態 = {
  番号:1
}

デフォルトの新しいVuex.Storeをエクスポートします({
  州、
})

'vue' から Vue をインポートします
'./App' から App をインポートします
'./router' からルーターをインポートします
//store.js を参照
'./vuex/store' からストアをインポートします。

Vue.config.productionTip = false


/* eslint を無効にする no-new */
新しいVue({
  el: '#app',
  ルーター、
//インスタンス化時にストアオブジェクトストアを追加します。
  コンポーネント: { アプリ },
  テンプレート: '<App/>'
})

<テンプレート>
  <div id="アプリ">
    <img src="./assets/logo.png">
// 簡単に観察できるようにビューレイヤーにデータを追加します<p>{{this.$store.state.number}}</p>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: 'アプリ'
}
</スクリプト>

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

<テンプレート>
  <div id="アプリ">
    <img src="./assets/logo.png">
    <p>{{$store.state.number}}</p>
    //データソースを変更するイベントをトリガーするボタンを追加します <button @click="add">button</button>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: 'アプリ'、
  方法:{
    追加（）{
    //データ ソースを変更するには、vuex で指定されたメソッドを使用する必要があります。this.$store.commit('addFunction');
    }
  }
}
</スクリプト>

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

'vue' から Vue をインポートします。
'vuex' から Vuex をインポートします。


Vue.js で Vuex をビルドします。
定数状態 = {
  番号:1
}

// ミューテーションオブジェクトを追加し、状態パラメータで上記の状態を取得できます
const 変異 = {
  addFunction(状態){
    state.number+=1 を返します。
  }
}

//ここでインスタンスに追加してください。そうしないとエラーが報告されます。export default new Vuex.Store({
  州、
  突然変異
})

'vue' から Vue をインポートします。
'vuex' から Vuex をインポートします。


Vue.js で Vuex をビルドします。
定数状態 = {
  番号:1
}

const ゲッター = {
    //メソッドを通じて状態をトリガーするのは上記の状態オブジェクトであり、状態の値を読み取ることができます。addFunction(state){
    state.number++ を返します。
  }
}
デフォルトの新しいVuex.Storeをエクスポートします({
  州、
//インスタンス化するときにオブジェクトゲッターを追加することを忘れないでください
})

<テンプレート>
  <div id="アプリ">
    <img src="./assets/logo.png">
    <p>ページ値: {{$store.state.number}}</p>
    // ページの値と比較するタグを追加します<p>ゲッターの値: {{$store.getters.addFunction}}</p>
  </div>
</テンプレート>

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

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

'vue' から Vue をインポートします。
'vuex' から Vuex をインポートします。


Vue.js で Vuex をビルドします。
定数状態 = {
  番号:1
}
const 変異 = {
  addFunction(状態){
    state.number++ を返します。
  }
}
const ゲッター = {
  addFunction(状態){
    state.number++ を返します。
  }
}
//コンテキストはストアインスタンスと同じプロパティとメソッドを持つオブジェクトです。const actions = {
  addFunction(コンテキスト){
    コンテキストをコミットします("addFunction");
  }
}
デフォルトの新しいVuex.Storeをエクスポートします({
  州、
  突然変異、
  ゲッター、
//インスタンス化するときにアクションを追加することを忘れないでください
})

<テンプレート>
  <div id="アプリ">
    <img src="./assets/logo.png">
    <p>ページ値: {{$store.state.number}}</p>
     <button @click="add">ボタン</button>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: 'アプリ'、
  方法:{
    追加（）{
//アクションでは、変更のためにミューテーションを送信するには this.$store.dispatch を使用します this.$store.dispatch("addFunction")
    }
  }
}
</スクリプト>

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