vue における vuex の詳細な紹介 (詳細な説明と例)-Vue.js-php.cn

コンセプト

インストール

Vuex アイコン

Vue プロジェクトでの vuex の使用 (2 種類)

ホームページ

ウェブフロントエンド

Vue.js

vue における vuex の詳細な紹介 (詳細な説明と例)

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Dec 31, 2021 pm 06:26 PM

vuex

この記事では、vue における vuex についての知識をお届けします。Vuex は、Vue.js アプリケーション用に特別に開発された状態管理モデルです。皆様のお役に立てれば幸いです。

vue における vuex の詳細な紹介 (詳細な説明と例)

コンセプト

Vuex は、Vue.js アプリケーション専用に開発された状態管理パターンです。集中ストレージを使用してアプリケーションのすべてのコンポーネントの状態を管理し、対応するルールを使用して状態が予測可能な方法で変化することを保証します。

インストール

HTML で script タグを使用して導入します

<script src="vue.js"></script>
<script src="vuex.js"></script>

ログイン後にコピー

npm を使用して Vue プロジェクトをダウンロードしてインストールします (ノード環境ではインストールする必要があります)

// 下载
npm install vuex --save

// 安装
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

ログイン後にコピー

Vuex アイコン

vue における vuex の詳細な紹介 (詳細な説明と例)

Vuex は、次の 2 つの点で単純なグローバルオブジェクトとは異なります。

Vuex の状態ストレージはリアクティブです。 Vue コンポーネントがストアから状態を読み取るときに、ストア内の状態が変化すると、それに応じて対応するコンポーネントが効率的に更新されます。

ストア

すべての Vuex アプリケーションの中核はストア (倉庫) です。「ストア」は基本的に、アプリケーション内のほとんどの状態を含むコンテナーです。

State

アプリケーションを駆動し、すべてのコンポーネントの共通データを保存するために使用されるデータソース。

Getter

Getter はストアの計算されたプロパティとして理解できます。Getter の戻り値はその依存関係に従ってキャッシュされ、その依存関係が満たされた場合にのみ発生します。値が発生すると、変更された場合にのみ再計算されます。

Mutation

Mutation オブジェクトには、データを変更するコールバック関数が格納されます。関数名は正式には type と呼ばれます。最初のパラメータは state、2 番目のパラメータは次のとおりです。ペイロード、つまりカスタマイズされたパラメータ。突然変異は同期関数である必要があります。ミューテーションオブジェクトのメソッドは、store.commit を使用して

Action

アクションを呼び出す必要があります。アクションは、状態を直接変更するのではなく、ミューテーションをコミットします。 action には任意の非同期操作を含めることができます。アクションオブジェクトのメソッドは、store.dispatch を使用して呼び出す必要があります。

Action 関数はストアインスタンスと同じメソッドとプロパティを持つコンテキストオブジェクトを受け入れるため、context.commit を呼び出して変更を送信したり、context.state と context.getters を通じて状態とゲッターを取得したりできます。

モジュール

単一の状態ツリーを使用するため、アプリケーションのすべての状態が比較的大きなオブジェクトに集中されます。アプリケーションが非常に複雑になると、ストアオブジェクトが非常に肥大化する可能性があります。上記の問題を解決するために、Vuex ではストアをモジュールに分割することができます。各モジュールには独自の状態、突然変異、アクション、ゲッター、さらには入れ子になったサブモジュールがあり、上から下まで同じ方法で分割されています。

HTML での vuex の使用

<body><p id="app">
    <input type="button" value="+" @click="add">
    {{this.$store.state.count}}
    <input type="button" value="-" @click="reduce">
    {{this.$store.getters.synchro}}
    <input type="button" value="改变为10" @click="changeNum"></p><script src="vue.js"></script><script src="vuex.js"></script><script>
    var store = new Vuex.Store({
        state: {
            count: 0
        },
        getters: {
            synchro(state) {
                return state.count            }
        },
        mutations: {   
            increment(state) {
                state.count++
            },
            inreduce(state) {
                state.count--
            },
            inchange(state, num) {
                state.count = num            }
        },
        actions: {
            change(context, num) {
                context.commit('inchange', num)
            }
        }
    })

    new Vue({
        el: '#app',
        store,
        methods: {
            add() {
                this.$store.commit('increment')
            },
            reduce() {
                this.$store.commit('inreduce')
            },
            changeNum() {
                this.$store.dispatch('change', 10)
            }
        }
    })</script></body>

ログイン後にコピー

Vue プロジェクトでの vuex の使用 (2 種類)

vuex を main.js ファイルに記述します

import Vue from 'vue'import App from './App'import router from './router'import Vuex from 'vuex'// 全局状态管理Vue.use(Vuex)Vue.config.productionTip = falsevar store = new Vuex.Store({
  state: {
    num: 0
  },
  mutations: {
    changeNum(state, num){
      state.num += num    }
  }})new Vue({
  el: '#app',
  store,
  router,
  components: { App },
  template: '<App/>'})

ログイン後にコピー

<template>
	<p>
		<input type="button" value="改变count的值" @click="change">
    	{{this.$store.state.count}}
	<p></template><script>export default {
	name: '',
	data () {
    	return {
		}
    },
    methods: {
		change() {
			this.$store.commit('changeNum', 10)
		}
	}}</script>

ログイン後にコピー

を呼び出して vuex

を分離します。 src ディレクトリに vuex ディレクトリを作成し、新しい modules ディレクトリとindex.js ファイルを作成します。 vuex ディレクトリに配置します

vue における vuex の詳細な紹介 (詳細な説明と例) main.js ファイルに vuex ディレクトリを導入します

import Vue from 'vue'import App from './App'import router from './router'import store from './vuex'Vue.config.productionTip = false/* eslint-disable no-new */new Vue({
  el: '#app',
  store,
  router,
  components: { App },
  template: '<App/>'})

ログイン後にコピー

index.js

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)let modules = {}const requireAllModules = require.context("./", true, /\.js$/)requireAllModules.keys().forEach(key => {
  let module = requireAllModules(key).default
  if (module && module.name && module.namespaced) {
    modules[module.name] = module  }})export default new Vuex.Store({
  modules: modules,
  strict: process.env.NODE_ENV !== "production"})

ログイン後にコピー

に次のコードを記述します次のコードを使用して modules ディレクトリに新しい city.js ファイルを作成します。

export default {
  name: "city",
  namespaced: true,
  state: {
    cityName: '',
    cityCode: ''
  },
  getters: {
    getState(state) {
      return state    },
    getCityCode(state) {
      return state.cityCode    }
  },
  mutations: {
    changeCity(state, cityName) {
      state.cityName = cityName    }
  }}

ログイン後にコピー

コンポーネントに値を設定します

<template>
	<p>
		<ul>
          <li v-for="item in city" @click="handChangeCity(item.name)"></li>
        </ul>
	</p></template><script>import { mapMutations } from 'vuex'   // 引入vuexexport default {
	name: "city",
	data() {
		return {
			city: [
				{ id: 1, name: '北京' }
				{ id: 2, name: '上海' }
				{ id: 3, name: '广州' }
				{ id: 4, name: '深圳' }
				{ id: 5, name: '厦门' }
			]
		}
	},
	methods: {
		// 修改
		...mapMutations({
			changeCity: "city/changeCity"
		}),
		// 第一种写法
		handChangeCity(cityName) {
			this.changeCity(cityName)
		}
		// 第二种写法  不需要使用 ...mapMutations
		handChangeCity(cityName) {
			this.$store.commit('city/changeCity', cityName);
		}
	}}</script>

ログイン後にコピー

別のコンポーネントで使用します

<template>
	<p>
		<p>{{getState.cityName}}</p>
		<p>{{getCityCode}}</p>
	</p></template><script>import { mapGetters} from 'vuex'   // 引入vuexexport default {
	data() {
		return {
		}
	},
	computed: {
	    // 第一种使用方法
	    ...mapGetters({
	    	getState: "city/getState"
	    })
	    // 第二种使用方法
	    ...mapGetters('city', ['getState', 'getCityCode'])
  	}}</script>

ログイン後にコピー

以上がvue における vuex の詳細な紹介 (詳細な説明と例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7517

CakePHP チュートリアル

1378

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

Vuex を使用して Vue2.x のグローバル状態を管理するためのベストプラクティス Jun 09, 2023 pm 04:07 PM

Vue2.x は現在最も人気のあるフロントエンドフレームワークの 1 つであり、グローバル状態を管理するためのソリューションとして Vuex を提供します。 Vuex を使用すると、状態管理がより明確になり、保守が容易になります。開発者が Vuex をより適切に使用し、コードの品質を向上させるために、Vuex のベストプラクティスを以下に紹介します。 1. モジュラー組織状態の使用 Vuex は単一の状態ツリーを使用してアプリケーションのすべての状態を管理し、コンポーネントから状態を抽出することで、状態管理をより明確かつ理解しやすくします。多くの状態を持つアプリケーションではモジュールを使用する必要があります

Vue アプリケーションで vuex を使用するときに「エラー: [vuex] 変更ハンドラーの外で vuex ストアの状態を変更しません。」という問題を解決するにはどうすればよいですか? Jun 24, 2023 pm 07:04 PM

Vue アプリケーションでは、vuex の使用が一般的な状態管理方法です。ただし、vuex を使用すると、「Error:[vuex]donotmutatevuexstorestateoutsidemutationhandlers」というエラーメッセージが表示されることがあります。このエラーメッセージは何を意味しますか?このエラーメッセージが表示されるのはなぜですか?このエラーを修正するにはどうすればよいですか?この記事では、この問題について詳しく説明します。エラーメッセージには次の内容が含まれます

Vue3 で Vuex を使用する方法 May 14, 2023 pm 08:28 PM

Vuexは何をするのですか? Vue 公式: 状態管理ツール状態管理とは? 複数のコンポーネント間で共有する必要があり、1 つの変更ですべてが変更される、応答性の高い状態。たとえば、グローバルに使用されるステータス情報: ユーザーのログインステータス、ユーザー名、地理的位置情報、ショッピングカート内の商品など。現時点では、グローバルステータス管理のためのこのようなツールが必要であり、Vuex はそのようなツールです。単一ページの状態管理ビュー –> アクション –> 状態ビューレイヤ (ビュー) は、アクション (アクション) をトリガーして状態 (state) を変更し、ビューレイヤ (ビュー) vuex (Vue3.

Vue アプリケーションで vuex を使用するときに「エラー: [vuex] 不明なアクションタイプ: xxx」という問題を解決するにはどうすればよいですか? Jun 25, 2023 pm 12:09 PM

Vue.js プロジェクトでは、vuex は非常に便利な状態管理ツールです。これは、複数のコンポーネント間で状態を共有するのに役立ち、状態の変更を管理する信頼性の高い方法を提供します。ただし、vuex を使用すると、「エラー:[vuex]unknownactiontype:xxx」というエラーが発生することがあります。この記事では、このエラーの原因と解決策について説明します。 1. エラーの原因 vuex を使用する場合、いくつかのアクションと mu を定義する必要があります。

vuex の実装原則について詳しく見る Mar 20, 2023 pm 06:14 PM

面接でvuexの実装原理について聞かれたらどう答えるべきでしょうか？ vuex の実装原理については以下の記事で詳しく解説していますので、お役に立てれば幸いです。

Vue アプリケーションで vuex を使用する際に「TypeError: Unknown のプロパティ 'xxx' を読み取れません」という問題を解決するにはどうすればよいですか? Aug 18, 2023 pm 09:24 PM

Vue アプリケーションで Vuex を使用することは、非常に一般的な操作です。ただし、Vuex を使用しているときに、「TypeError: Cannotreadproperty'xxx'ofunknown」というエラーメッセージが表示されることがあります。このエラーメッセージは、未定義のプロパティ "xxx" を読み取れず、プログラムエラーが発生することを意味します。この問題の理由は実は非常に明白で、Vuex の特定の属性を呼び出すときに、この属性が正しく設定されていないことが原因です。

vue3+vite で vuex を使用する方法 Jun 03, 2023 am 09:10 AM

具体的な手順: 1. vuex (vue3 は 4.0 以降を推奨) pnpmivuex-S2 をインストールし、main.js で importstorefrom'@/store'//hx-app のグローバル構成を構成します constapp=createApp(App)app.use(store) 3新しい関連フォルダーとファイルを作成します。ここでは、異なる vuex 内に複数の js を構成します。vuex モジュールを使用して、異なるページとファイルを配置し、getters.jsindex.js コアファイルを使用します。ここでは、代わりに Import.meta.glob が使用されます。の

Vue でコンポーネント通信に vuex を使用するにはどうすればよいですか? Jul 19, 2023 pm 06:16 PM

Vue でコンポーネント通信に vuex を使用するにはどうすればよいですか? Vue は、コンポーネントベースの開発モデルを採用する人気の JavaScript フレームワークで、複雑なアプリケーションをより簡単に構築できるようにします。 Vue のコンポーネント開発プロセスでは、異なるコンポーネント間の通信が必要な状況によく遭遇します。 Vuex は Vue が公式に推奨する状態管理ツールで、集中ストレージマネージャーを提供し、コンポーネント間の通信の問題を解決します。この記事では、Vue でのコンポーネント通信に Vuex を使用する方法を紹介します。

See all articles

vue における vuex の詳細な紹介 (詳細な説明と例)

コンセプト

インストール

Vuex アイコン

Vue プロジェクトでの vuex の使用 (2 種類)

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック