Vuex初心者の理解と使用の詳細

1 vuexの概念理解
vuexといえば、まずvueを言わないわけにはいかない。
個人的にvueを使って勉強しようとしていますが、これまではページ論理データとビューの整合性が問題になっていました。vueを使う前に、jQueryプラグインを使う時、一つの面倒なことはデータごとに変更した後、コードを書いてビューを変えたり、いろいろな入力変更時にページ論理データを監視して変えたりすることです。もちろん、一番早い時期に、私達はhtml内部のvalueを使って各種のデータを記録していますが、このような方法は今日から見れば簡単で乱暴で、複雑なページの論理を使いにくいです。
しかし、vueにとっては、もう一つの強力な機能があります。コンポーネント機能です。この機能に対しては、二つの使用理解があります。一つは簡単で軽い車輪を作ることで、他のプロジェクトに適用するのは難しいですが、プロジェクト内の複数のページに適用されます。二つ目はルートページで、各ページを一つのコンポーネントではなく、一つの単独のhtmlページと見なすことです。
vueを使い始めた時、各ページでnewの新しいvueを実現します。このような使い方はもちろん、古いプロジェクトにも対応できますが、少し足りないです。つまり、論理データの管理はhtmlページの単位です。ページ間のデータには何の関連もありません。ページ間はiframeで接続ができますが、相互間のデータ交流はあまり良くないです。また互換性もあります。
vuexはそのために用意されている前提の一つです。ページ関連の方法は、vueコンポーネントを通じて関連付けられています。この方式を使って、フロントvueを使ってプログラミングする思想には、いくつかの変化が発生します。ここでは、データ交流を通じて行うことができるいくつかのことを挙げます。
多くのよく使われる基礎データは、すべてのページで共有でき、技術的な場合に適しています。
コンポーネントには、よく使われる2つの属性があります。1つはdataです。1つはpropです。私の理解では、dataはコンポーネント内部の論理を担当しています。propは、最も一般的なvalueなどの内部データとの関連を担当しています。しかし、ルートページの構成の枠組みにとって、ルートページを切り替えると、元のルートページdataが空になります。この場合、vuex.storeを使ってデータを格納することは避けられます。これはvueコンポーネントページの場合に適用されます。
2 vuexの使用
フロントプロジェクトにとっては、vueコンポーネントは多いはずですが、vuexは一つしかないです。もちろん、importによってvuexを枝切りにして、異なるmoduleに異なる業務データを記憶させます。以下はvuexの主幹内容量です。

import Vue from 'vue'
import Vuex from 'vuex'

import user from './module/user'
import app from './module/app'
import basedata from './module/basedata'

Vue.use(Vuex)

export default new Vuex.Store({
 state: {
  //
 },
 mutations: {
  //
 },
 actions: {
  //
 },
 modules: {
  user,
  app,
  basedata
 }
})

以下はその中の1つの枝葉です。/module/basedata.jsは基礎データを格納するためのmoduleです。

import { getCusData, getSupSelect } from '../../api/public'

/**
 *         ,       :
 * 1.       !!!
 * 2.             !!!
 * 3.                    ,                    .
 * @author YangYishe
 */
export default {
 state: {
  //     
  arrCustomer: [],
  //      
  arrSupplier: [],
  
  nowTimes: 0
 },
 mutations: {
  setNowTimes (state, times) {
   //   vuex state   
   console.log('set now times')
   state.nowTimes = new Date().getTime() + times
  },
  //       
  setCustomerData (state, arrCustomer) {
   state.arrCustomer = arrCustomer
  },
  //        
  setSupplierData (state, arrSupplier) {
   state.arrSupplier = arrSupplier
  },
  
 },
 getters: {

 },
 actions: {
  //       
  handleChangeTimes ({ state, commit }, { times }) {
   commit('setNowTimes', times)
  },
  //       (  mapState return    )
  loadCustomer ({ state, commit }) {
   //       (Promise       )
   if (state.arrCustomer.length === 0) {
    return new Promise((resolve, reject) => {
     getCusData().then(res => {
      commit('setCustomerData', res.data)
      resolve(res.data)
     }).catch(err => reject(err))
    })
   } else {
    return state.arrCustomer
   }
  },
  //        (  mapState return    )
  loadSupplier ({ state, commit }) {
   if (state.arrSupplier.length === 0) {
    return new Promise((resolve, reject) => {
     getSupSelect().then(res => {
      commit('setSupplierData', res.data)
      resolve(res.data)
     }).catch(err => reject(err))
    })
   } else {
    return state.arrSupplier
   }
  },
  
 }
}

このmodule/basedata.jsの中から、私達はこのmoduleの大体のロジックを見抜きやすいです。

stateに格納されたグローバルな顧客とサプライヤーの集合。

muttionsは、一般的にsettersに類似して、state内のデータを同期させるために使用される。

gettersは、stateに基づいて各種属性値を計算するために使用される。

actionsは、非同期的にデータを受信する（必ずしも非同期的な方法ではなく、第一の方法のように、外部からのインターフェースはここから呼び出される）。その後、muttions内部方法を呼び出してstateの値を変更する。

外部からの呼び出し方法は、以下の通りです。

<template>
  ...
  <!--       iview  ,  Select Option        -->
  <Select v-model="mCondition.customerId" clearable filterable>
   <Option v-for="mCustomer in arrCustomer" :key="mCustomer.id" :value="mCustomer.id">{{mCustomer.name}}</Option>
  </Select>
  ...
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default{
  name:'test-temp',
  data(){
    return {
      //
      mCondition:{}
    }
  },
  computed:{
    //       vuex.store   ,                 
    ...mapState({
      arrCustomer:state=>state.basedata.arrCustomer
    })
    
  },
  created(){
    //       mapActions   ,        ,           ,    {state}
    this.loadCustomer();
  },
  methods:{
    //              
    ...mapActions([
     'loadCustomer',
    ]),
  }
  
}

</script>

以上がevuexの使い方です。個人的には比較中の説明はコードのコメントに入れてあります。
3その他の注意点
この文章は初心者に理解と上手にする傾向があるので、コードはより簡単な方案に偏っています。
実際の使用では、キャッシュの交換についての考えがより複雑になるかもしれない。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。