VueXの一般的な構成と使用方法

インストール

npm install vuex --save

VueXの初期化

storeフォルダを新規作成し(これは必須ではありません)、フォルダの下にstoreを新規作成します.jsファイル、ファイルにvueとvuex

を導入

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
//     
const state = {
  count: 0
};
var vuexStore = new Vuex.Store({
  state
});
//    export default   ，       
export default vuexStore;

使用するコンポーネントにstoreを導入する.js、および

ここでは3つの方法でVueXの中の値を得ることができます.thisを使用して取得またはcomputedの計算属性によって

に直接割り当てます.

import store from "../store/store.js";
export default {
  store,//  
  data(){
    return{
      //  
      count:this.$store.state.count
    }
  }
};
//  
computed:{
    count(){
        return this.$store.state.count;
    }
}

2.mapStateのオブジェクトによる値付け

import {mapState} from 'vuex';
computed:mapState({
  //     state  ，  state.count  
  count:state=>state.count  
})

3.mapStateの配列による値付け

computed:mapState(["count"])

状態を変更する方法の作成

はstoreにあります.js中

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);

const state = {
  count: 0
};
//       
const mutations = {
  add(state) {
    state.count++;
  },
  mul(state) {
    state.count--;
  }
};
var vuexStore = new Vuex.Store({
  state,
  mutations //  
});

//    export default   ，       
export default vuexStore;

状態を変える方法を使う

使用するコンポーネントのうち

<button @click="$store.commit('add')">addbutton>

gettersを使用してデータを更新する

const getters = {
  count:function(state){
    return state.count +=100;
  }
};
var vuexStore = new Vuex.Store({
  state,
  mutations,
  getters
});

コンポーネントにmapGettersをインポートし、

を使用します.
1.インポート

import { mapGetters } from 'vuex';

2.methodsに加える

...mapGetters(["count"])

3.ページでの使用

<button @click="count()">mapGetters       button>

Actions非同期変更ステータス
1.storeでメソッドを作成する-context:コンテキストオブジェクト、ここではstore自体と呼ぶ-{commit}:commitオブジェクトを直接渡すことで、メソッドの論理とコードをより明確にすることができます

const actions ={
  addAction(context){
    context.commit('add',10)
  },
  reduceAction({commit}){
    commit('reduce')
  }
}

2.コンポーネントのimportインポートmapActions

import { mapActions } from 'vuex';

3.methodsにmapActionsを加える

...mapActions(['addAction','reduceAction'])

4.ページでの使用

<button @click="addAction">mapActions      button>