Vuex 状態管理ツール (モジュール開発)

1. 以下は、vuex の理解とワークフロー図です (すでに知っている場合は、スキップして実装コードを参照してください)。

Vuex は、データのフローと共有の管理を支援する Vue.js アプリケーション用に開発された状態管理用のライブラリです。

以下は、Vuex のいくつかの重要な概念を理解したものです。

1. 状態: 単一の状態ツリーには、アプリケーション全体の状態が保存されます。State は Vuex に保存されている一元化された公開データ ソースであり、this.$store.state経由でアクセスできます。多くの場合、これはアプリケーションの唯一のデータ ソースとみなされます。

2. Getters : Getters を使用すると、Vuex に保存されている状態から新しい状態を派生できます。Vue コンポーネントの計算プロパティと同様に、ゲッターは状態を処理および計算し、結果を他のコンポーネントに公開できます。

3. ミューテーション: ミューテーションは状態を変更する唯一の方法です。ミューテーションは、状態を変更し、状態の変化を追跡する同期関数である必要があります。送信時にメソッドを呼び出しcommit、データ ペイロード (ペイロード) を渡すためのパラメーターを受け取る必要があります。Mutation のみが状態を変更できるため、状態変更の追跡可能性と保守性が保証されます。

4. アクション: アクションは、非同期操作または複数のミューテーションを含む複雑な操作を処理するために使用されます。アクションには、サーバーからデータを取得した後に状態を更新するミューテーションを送信するなど、非同期操作を含めることができます。Action は、コンポーネント内のメソッドを呼び出すことによってトリガーされdispatch、Promise を受け取ることができるため、非同期操作の完了後に Mutation を送信できます。

5. Module : Module を使用すると、Vuex を個々のモジュールに分割できます。各モジュールには独自の状態 (Getter、Mutation、Action) があり、ネストして他のモジュールを参照することができます。このようにコードを編成すると、スケーラビリティとメンテナンスが向上し、異なるモジュール間で状態を共有できるようになります。

Vuex を使用すると、グローバル状態の一元管理が実現できるため、さまざまなコンポーネントが状態を簡単に共有および更新できます。予測可能な状態管理メカニズムを提供し、データ ストリームの処理とデバッグを簡素化し、アプリケーション開発をより簡単かつ保守しやすくします。

2. 正式な開始: まずストア フォルダーを作成し、index.js ファイルを作成し、Vue と Vuex を導入します。モジュラー開発が必要な場合は、index.js フォルダーに作成された別のストア ウェアハウス js ファイルをインポートし、モジュールを使用してこの 2 つを実行します。それらが統合されました。

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
import countOptions from './count'
import personOptions from './person'
//应用Vuex插件
Vue.use(Vuex)

//创建并暴露store
export default new Vuex.Store({
	modules:{
		countAbout:countOptions,
		personAbout:personOptions
	}
})

 3. カウント ウェアハウスには 5 つの属性があり、アクション、ミューテーション、状態、ゲッター、モジュールに分かれています
1. アクションは、axios リクエスト、非同期操作などの非同期操作を処理するために使用されますか?
2. ミューテーションは、処理に使用されますデータ。
3. 状態はデータの初期化に使用されます。
4. ゲッターは計算された属性に似ており、一般に処理されたデータを処理します。
5. モジュール モジュール開発
アクション オブジェクトで受け取った関数は 2 つのパラメーターを受け取ることができます。1 つ目はコンテキスト オブジェクト、2 つ目は渡されたデータ、ミューテーション内のメソッドはコンテキストでトリガーできます。
ミューテーション オブジェクト内のメソッドは 2 つのパラメーターを受け取ることができます。最初のパラメーターはステートによって初期化されたデータであり、2 番目のパラメーターはアクションによって渡されたデータです。

//求和相关的配置
export default {
	namespaced:true,
	actions:{
		jiaOdd(context,value){
			console.log('actions中的jiaOdd被调用了')
			if(context.state.sum % 2){
				context.commit('JIA',value)
			}
		},
		jiaWait(context,value){
			console.log('actions中的jiaWait被调用了')
			setTimeout(()=>{
				context.commit('JIA',value)
			},500)
		}
	},
	mutations:{
		JIA(state,value){
			console.log('mutations中的JIA被调用了')
			state.sum += value
		},
		JIAN(state,value){
			console.log('mutations中的JIAN被调用了')
			state.sum -= value
		},
	},
	state:{
		sum:0, //当前的和
		school:'不知名',
		subject:'前端',
	},
	getters:{
		bigSum(state){
			return state.sum*10
		}
	},
}

4. データウェアハウスのデータを取得またはページ内にデータを配布する方法: 1
つ目の方法: vuex の最適化機能を使用してデータを取得または配布する方法
まず 4 つの方法を紹介します。
計算プロパティでは、mapState と mapGetters を展開してデータを取得できます。
メソッドでは、mapMutations mapActions を展開してアクション メソッドをディスパッチしたり、突然変異のデータを直接変更したりできます
...mapState('countAbout',['sum','school ',' subject'])、最初のパラメーターはモジュールモジュールの countAbout からデータを取得することを意味し、2 番目のパラメーターは配列メソッドである countAbout ファイルから状態データを取得することを意味します...mapMutations('countAbout', {increment
: 'JIA', decrement:'JIAN'})、
最初のパラメーターはモジュール名、2 番目のパラメーターはキーと値のペア、キーは UI ページでトリガーされるメソッド、2 番目のパラメーターは UI ページで対応するものです。切断方法 

<template>
	<div>
		<h1>当前求和为：{
   
   {sum}}</h1>
		<h3>当前求和放大10倍为：{
   
   {bigSum}}</h3>
		<h3>我在{
   
   {school}}，学习{
   
   {subject}}</h3>
		<h3 style="color:red">Person组件的总人数是：{
   
   {personList.length}}</h3>
		<select v-model.number="n">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<button @click="increment(n)">+</button>
		<button @click="decrement(n)">-</button>
		<button @click="incrementOdd(n)">当前求和为奇数再加</button>
		<button @click="incrementWait(n)">等一等再加</button>
	</div>
</template>

<script>
	import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
	export default {
		name:'Count',
		data() {
			return {
				n:1, //用户选择的数字
			}
		},
		computed:{
			//借助mapState生成计算属性，从state中读取数据。（数组写法）
			...mapState('countAbout',['sum','school','subject']),
			...mapState('personAbout',['personList']),
			//借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
			...mapGetters('countAbout',['bigSum'])
		},
		methods: {
			//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
			...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
			//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
			...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
		},
		mounted() {
			console.log(this.$store)
		},
	}
</script>

<style lang="css">
	button{
		margin-left: 5px;
	}
</style>

5. データ ウェアハウス データの取得またはページ内でのデータの配布方法:
2 番目の方法: ネイティブな方法でのデータの取得または配布方法
最初のステップは、エントリ ファイルにストアを導入し、vm にマウントすることです
。次に、これを「Get
the data in the
store.state.personAbout
」
personAbout ウェアハウス内のミューションのコミット メソッドをトリガーする .$store.commit('personAbout/ADD_PERSON ', personObj) は、ミューション メソッド内の関数を直接トリガーします。通常、このメソッドは、これを通じて非同期操作なしで直接使用できます
。 .$store.dispatch('personAbout/addPersonWang', personObj)
アクションで非同期メソッドをトリガーします

main.js ファイル

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入插件
import vueResource from 'vue-resource'
//引入store
import store from './store'

//关闭Vue的生产提示
Vue.config.productionTip = false
//使用插件
Vue.use(vueResource)

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	store,
	beforeCreate() {
		Vue.prototype.$bus = this
	}
})

person.vue文件： 

<template>
	<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">添加一个姓王的人</button>
		<button @click="addPersonServer">添加一个人，名字随机</button>
		<ul>
			<li v-for="p in personList" :key="p.id">{
   
   {p.name}}</li>
		</ul>
	</div>
</template>

<script>
	import {nanoid} from 'nanoid'
	export default {
		name:'Person',
		data() {
			return {
				name:''
			}
		},
		computed:{
			personList(){
				return this.$store.state.personAbout.personList
			},
			sum(){
				return this.$store.state.countAbout.sum
			},
			firstPersonName(){
				return this.$store.getters['personAbout/firstPersonName']
			}
		},
		methods: {
			add(){
				const personObj = {id:nanoid(),name:this.name}
				this.$store.commit('personAbout/ADD_PERSON',personObj)
				this.name = ''
			},
			addWang(){
				const personObj = {id:nanoid(),name:this.name}
				this.$store.dispatch('personAbout/addPersonWang',personObj)
				this.name = ''
			},
			addPersonServer(){
				this.$store.dispatch('personAbout/addPersonServer')
			}
		},
	}
</script>

person.js ファイル: 

//人员管理相关的配置
import axios from 'axios'
import { nanoid } from 'nanoid'
export default {
	namespaced:true,
	actions:{
		addPersonWang(context,value){
			if(value.name.indexOf('王') === 0){
				context.commit('ADD_PERSON',value)
			}else{
				alert('添加的人必须姓王！')
			}
		},
		addPersonServer(context){
			axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then(
				response => {
					context.commit('ADD_PERSON',{id:nanoid(),name:response.data})
				},
				error => {
					alert(error.message)
				}
			)
		}
	},
	mutations:{
		ADD_PERSON(state,value){
			console.log('mutations中的ADD_PERSON被调用了')
			state.personList.unshift(value)
		}
	},
	state:{
		personList:[
			{id:'001',name:'张三'}
		]
	},
	getters:{
		firstPersonName(state){
			return state.personList[0].name
		}
	},
}