Vuex のモジュール化と名前空間の例のデモ

定数countAbout = {
  namespaced:true, //名前空間を開く状態:{x:1},
  変異: { ... },
  アクション: { ... },
  ゲッター: {
    bigSum(状態){
       状態合計 * 10 を返す
    }
  }
}

const personAbout = {
  namespaced:true, //名前空間を開く state:{ ... },
  変異: { ... },
  アクション: { ... }
}

定数ストア = 新しい Vuex.Store({
  モジュール:
    countAbout、
    人について
  }
})

//方法 1: this.$store.state.personAbout.list を直接読み取る


//方法 2: mapState で読み取る:
...mapState('countAbout',['sum','school','subject']),

//方法1: this.$store.getters['personAbout/firstPersonName']を直接読み取る

//方法 2: mapGetters で読み取る:
...mapGetters('countAbout',['bigSum'])

//方法1: 直接ディスパッチする
this.$store.dispatch('personAbout/addPersonWang',person)


//方法 2: mapActions を使用する場合:
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

//方法1: 直接コミットする
this.$store.commit('personAbout/ADD_PERSON',person)


//方法 2: mapMutations を使用する場合:
...mapMutations('countAbout',{増分:'JIA',減分:'JIAN'}),

//Vue の紹介
'vue' から Vue をインポートします
//アプリの紹介
'./App.vue' からアプリをインポートします。
//店舗紹介
'./store' からストアをインポートします

//Vue のプロダクションプロンプトをオフにする Vue.config.productionTip = false

//VM を作成
新しいVue({
	el:'#app',
	レンダリング: h => h(App),
	店、
	作成前() {
		Vue.prototype.$bus = これ
	}
})

<テンプレート>
	<div>
		<カウント/>
		<時間>
		<人物/>
	</div>
</テンプレート>

<スクリプト>
	'./components/Count' から Count をインポートします。
	'./components/Person' から Person をインポートします。

	エクスポートデフォルト{
		名前:'アプリ',
		コンポーネント:{Count,Person},
	}
</スクリプト>

//このファイルはVuexのコアストアを作成するために使用されます
'vue' から Vue をインポートします
//Vuex の紹介
'vuex' から Vuex をインポートします
countOptions を './count' からインポートします。
'./person' から personOptions をインポートします。
//Vuex プラグインを適用する Vue.use(Vuex)

//ストアを作成して公開する
デフォルトの新しいVuex.Storeをエクスポートします({
	モジュール:{
		countAbout:countOptions、
		personAbout:personオプション
	}
})

//関連設定をエクスポートするデフォルト{
	名前空間:true、
	アクション:{
		jiaOdd(コンテキスト,値){
			console.log('アクション内のjiaOddが呼び出されます')
			if(context.state.sum % 2){
				context.commit('JIA',値)
			}
		},
		jiaWait(コンテキスト,値){
			console.log('アクション内のjiaWaitが呼び出されました')
			タイムアウトを設定します(()=>{
				context.commit('JIA',値)
			},500)
		}
	},
	突然変異:
		JIA(状態,値){
			console.log('突然変異のJIAが呼び出されます')
			状態.合計 += 値
		},
		JIAN(状態,値){
			console.log('突然変異のJIANが呼び出されます')
			状態.合計 -= 値
		},
	},
	州：{
		sum:0, //現在の合計 school:'Shang Silicon Valley',
		件名:「フロントエンド」、
	},
	ゲッター:{
		bigSum(状態){
			状態.合計*10を返す
		}
	},
}

//人事管理関連の設定 import axios from 'axios'
'nanoid' から {nanoid } をインポートします
エクスポートデフォルト{
	名前空間:true、
	アクション:{
		addPersonWang(コンテキスト、値){
			if(value.name.indexOf('王') === 0){
				context.commit('ADD_PERSON',値)
			}それ以外{
				alert('追加する人物は王姓である必要があります!')
			}
		},
		addPersonServer(コンテキスト){
			axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then(
				レスポンス => {
					context.commit('ADD_PERSON',{id:nanoid(),name:response.data})
				},
				エラー => {
					アラート(エラー.メッセージ)
				}
			）
		}
	},
	突然変異:
		ADD_PERSON(状態,値){
			console.log('ミューテーションのADD_PERSONが呼び出されます')
			state.personList.unshift(値)
		}
	},
	州：{
		人リスト:[
			{id:'001',name:'张三'}
		]
	},
	ゲッター:{
		firstPersonName(州){
			state.personList[0].nameを返す
		}
	},
}

<テンプレート>
	<div>
		<h1>現在の合計: {{sum}}</h1>
		<h3>現在の合計は 10 倍に拡大されます: {{bigSum}}</h3>
		<h3>私は{{school}}に通っていて、{{subject}}を勉強しています。}</h3>
		<h3 style="color:red">Person コンポーネント内の人数の合計は: {{personList.length}}</h3>
		<v-model.number="n">を選択します。
			<オプション値="1">1</オプション>
			<オプション値="2">2</オプション>
			<オプション値="3">3</オプション>
		</選択>
		<button @click="increment(n)">+</button>
		<button @click="decrement(n)">-</button>
		<button @click="incrementOdd(n)">現在の合計が奇数の場合は加算します</button>
		<button @click="incrementWait(n)">追加する前にしばらくお待ちください</button>
	</div>
</テンプレート>

<スクリプト>
	'vuex' から {mapState、mapGetters、mapMutations、mapActions} をインポートします。
	エクスポートデフォルト{
		名前:'カウント',
		データ（） {
			戻る {
				n:1, //ユーザーが選択した番号 }
		},
		計算:{
			//mapState を使用して計算プロパティを生成し、状態からデータを読み取ります。 （配列書き込み）
			...mapState('countAbout',['sum','school','subject']),
			...mapState('personAbout',['personList']),
			// mapGetters を使用して計算プロパティを生成し、ゲッターからデータを読み取ります。 （配列書き込み）
			...mapGetters('countAbout',['bigSum'])
		},
		メソッド: {
			// mapMutations の助けを借りて対応するメソッドを生成し、commit を呼び出して変更 (オブジェクトの書き込み) に連絡します。
			...mapMutations('countAbout',{増分:'JIA',減分:'JIAN'}),
			//mapActions の助けを借りて対応するメソッドを生成し、コンタクトアクション (オブジェクトの書き込み) にディスパッチを呼び出します。
			...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
		},
		マウント() {
			console.log(this.$store)
		},
	}
</スクリプト>

<スタイル lang="css">
	ボタン{
		左マージン: 5px;
	}
</スタイル>

<テンプレート>
	<div>
		<h1>スタッフリスト</h1>
		<h3 style="color:red">Count コンポーネントの合計は次のとおりです: {{sum}}</h3>
		<h3>リストの最初の人物の名前は {{firstPersonName} です。}</h3>
		<input type="text" placeholder="お名前を入力してください" v-model="name">
		<button @click="add">追加</button>
		<button @click="addWang">姓が Wang の人を追加する</button>
		<button @click="addPersonServer">ランダムな名前で人を追加する</button>
		<ul>
			<li v-for="p in personList" :key="p.id">{{p.name}}</li>
		</ul>
	</div>
</テンプレート>

<スクリプト>
	'nanoid' から {nanoid} をインポートします
	エクスポートデフォルト{
		名前:'人',
		データ（） {
			戻る {
				名前：''
			}
		},
		計算:{
			人リスト(){
				これを返します。$store.state.personAbout.personList
			},
			和（）{
				これを返します。$store.state.countAbout.sum
			},
			最初の人物名(){
				this.$store.getters['personAbout/firstPersonName'] を返します。
			}
		},
		メソッド: {
			追加（）{
				const personObj = {id:nanoid(),name:this.name}
				this.$store.commit('personAbout/ADD_PERSON',personObj)
				this.name = ''
			},
			追加王(){
				const personObj = {id:nanoid(),name:this.name}
				this.$store.dispatch('personAbout/addPersonWang',personObj)
				this.name = ''
			},
			追加PersonServer(){
				this.$store.dispatch('personAbout/addPersonServer')
			}
		},
	}
</スクリプト>