Vuexの共通知識（まとめ）-Vue.js-php.cn

Vuexの共通知識（まとめ）

青灯夜游

リリース： 2020-10-07 14:11:35

転載

1814 人が閲覧しました

Vuexの共通知識（まとめ）

以前に vue.js を使用したことがある場合は、vue のさまざまなコンポーネント間で値を渡す苦労を知っているはずです。vue では、vuex を使用して必要な状態を保存できます。値について、vuex でよく使用される知識ポイントをいくつか見てみましょう。皆さんのお役に立てれば幸いです。

1. Vuex を使用する理由

1. 複数のコンポーネントが同じ状態に依存しており、コンポーネント間で通信メソッドを使用することは、多層のネストなど、非常に煩雑になります。コンポーネントです。

2. グローバルに保存する必要があるデータ (ユーザー、権限情報、グローバルシステム設定など)

#2. Vuex の 5 つのコア属性

1 , state: ストレージ状態

// store.jsconst store = new Vuex.Store({
  state: {
    count: 0
  }});// 组件里获取count值$store.state.count

ログイン後にコピー

2. getters: state は最初のパラメータとして使用され、他のゲッターは 2 番目のパラメータとして使用されます。戻り値は依存関係に従ってキャッシュされます。これは同等です。 Vue の計算されたプロパティ

// store.jsconst store = new Vuex.Store({
  state: {
    count: 1，
    sum: 2
  },
  getters: {
    getCountAndSum： (state,getters) => {
      return state.count + state.sum;
    }
  }});// 其他组件获取getter$store.getters.getCountAndSum

ログイン後にコピー

3. ミューテーション: 状態 (同期) を変更し、状態を最初のパラメーターとして、ペイロードを 2 番目のパラメーターとして送信します

const store = new Vuex.Store({
  state: {
    count: 1 
  },
  mutations: {
    increment (state, obj) {
      state.count += obj.n;
    }
  }});// 其他组件调用mutations的方法$store.commit(&#39;increment&#39;, {n: 100});

ログイン後にコピー

4. アクション: 非同期操作 (メソッド)ステータスを直接変更するのではなく、ミューテーションを実行するため)

const store = new Vuex.Store({
  state: {
    count: 1 
  },
  mutations: {
    increment (state, obj) {
      state.count += obj.n;
    }
  },
  actions: {
    increment (context) {
      context.commit(&#39;increment&#39;);
    }
  }});// 其他组件调用actions的方法$store.dispatch(&#39;increment&#39;);

ログイン後にコピー

5. モジュール: ストアのサブモジュール

const a = {
  state: {
    count: 0
  },
  getters: {
    getCount2 (state, getters, rootState) {
      return state.count + 2;
    }
  },
  mutations: {
    increment (state, getters, rootState) {
      state.count++;  
    }
  },
  actions: {
    increment (context) {
      // context.state.count;
      // context.rootState.count;
      context.commit(&#39;increment&#39;);
    }
  }};const b = {};const store = new Vuex.Store({
  modules: {
     a,
     b  }});// 其他组件调用 （获取state的变量需要加上引入的module的别名)$store.state.a$store.state.b

ログイン後にコピー

#3. Vuex 補助関数

<template>
  <div class="about">
    <h1>count: <span>{{count}}</span></h1>
    <h1>getCount: <span>{{$store.getters.getCount}}</span></h1>
    <h1>sum: <span>{{sum}}</span></h1>
    <h1>getSum: <span>{{$store.getters.getSum}}</span></h1>
    <button @click="clickB">test    </button>
  </div></template><script>import {mapState, mapGetters, mapMutations, mapActions} from &#39;vuex&#39;; 
export default {
  name: &#39;about&#39;,
  data () {
    return {
      count: 0,
      sum: 0
    }
  },
  computed: {
    ...mapState({
      count: state => state.count,
      countAlias: &#39;count&#39;,
      countPlusLocalState (state) {
        return state.count + this.localCount;
      }
    }),
    ...mapGetters([
      &#39;getCount&#39;, &#39;getSum&#39;
    ])
  },
  mounted () {
    this.count = this.$store.state.count;
    this.sum = this.$store.state.a.sum;

  },
  methods:{
    ...mapMutations(
      &#39;add&#39;,&#39;addO&#39;
    ),
    ...mapActions([
      &#39;add&#39;,&#39;addO&#39;
    ]),
    clickB () {
      this.$store.dispatch(&#39;add&#39;);
      this.$store.dispatch(&#39;addO&#39;);
    }
  }
}</script>

ログイン後にコピー