検索
簡単な vuex とモジュール化を学ぶJan 16, 2018 am 09:18 AM
vuexモジュラー単純

Vuex は単一の状態ツリーの使用を重視しています。つまり、プロジェクト内にストアが 1 つだけ存在し、このストアがプロジェクト内のすべてのデータとそのデータに対する操作を集中管理します。しかし、これが引き起こす問題は、ストアが非常に肥大化して保守が困難になる可能性があるため、状態ツリーをモジュールに分割する必要があることです。

チュートリアルの例

この例は、vue-cli に基づいて構築されています。以下は、src ファイルの下のコンテンツ ディレクトリです。

├── App.vue
├── components // 组件文件夹
│ ├── tab1.vue
│ ├── tab2.vue
│ ├── tab3.vue
│ └── tab4.vue
├── main.js // vue的主文件入口
├── router // vue-router文件
│ └── index.js
└── store // vuex文件
 ├── action.js // action
 ├── getter.js // getter
 ├── index.js // vuex的主文件
 ├── module // 模块文件
 │ ├── tab2.js
 │ └── tab3.js
 ├── mutation-type.js // mutation常量名文件
 └── mutation.js // mutation

効果はこんな感じです(シンプルさを嫌いにしないでください)

この例では、モジュール関連の知識を含む、基本的に一般的な、ドキュメントで言及されているすべての vuex 関連の知識を使用しました。使用シナリオは次のとおりです。すべてカバーされています。

これ以上ナンセンスはありません、始めましょう。

まず、app.vue と router はルーティングに関連するもので、ドキュメントを見れば理解できます。

vuex のモジュール化

この例を書く前に、私は最初はかなり新鮮でした。結局のところ、vuex はこれまでのプロジェクトでは深く使用されていませんでした。 vuex を含む js で機能はすべて完成しましたが、プロジェクトが複雑な場合は確かにこのように書くことはできません。そのため、この点についてのアイデアを明確にするためにサンプルを書きたいと思いました。結果は非常に簡単です。

ストア ファイルのコンテンツは、vuex の 5 つの中心的な概念に従って構築されており、そうすることの利点は、mutation.js や mutation-type.js など、ビジネス ロジックの整理やその後のメンテナンスに非常に便利です。

ミューテーション内のメソッド名を定数として抽出し、別のファイルに置き、使用するときに関連するコンテンツを引用します。これは、どのメソッドが存在するかを管理および理解するのが非常に簡単で、非常に直感的です。一方、アクションを使用する必要がある場合もあります。同じメソッド名を使用して、定数ファイルを導入するだけで済みます。

// mutation-type.js

const CHANGE_COUNT = 'CHANGE_COUNT';


export default {
 CHANGE_COUNT
}
これはどうですか、ファイルに書くほど面倒ではないようです。

...mapGetters と...mapActions


tab1.vue 内:

// mutation.js

import type from './mutation-type'

let mutations = {
 [type.CHANGE_COUNT](state) {
 state.count++
 }
}

export default mutations
index.js ファイル:

// action.js
import type from './mutation-type'

let actions = {
 [type.CHANGE_COUNT]({ commit }) {
 
 commit(type.CHANGE_COUNT)
 
 }
}

export default actions
vuex は補助関数と呼ばれるものを提供しており、その利点によりページでの作業が可能になります。使用する必要があるものを表示したり、使用時に記述するコンテンツを減らすこともできますが、これは必須ではありません。自分のニーズに応じて使用できます。

効果が発揮される場所が異なるので注意が必要です。

...mapGetters はこのページの計算されたプロパティに記述されており、計算されたプロパティを使用するのと同じようにゲッター内のコンテンツを使用できます。

...mapActions はこのページのメソッドに記述されており、他のメソッドで呼び出すことも、次のように @click に直接記述することもできます:

// tab1.vue
<template>
 <p>
 </p>
<p>这是tab1的内容</p>
 <em>{{count}}</em>
 <p>getter:{{NewArr}}</p>
 
</template>


<script>
import { mapActions, mapGetters } from "vuex";
import type from "../store/mutation-type";
export default {
 computed: {
 ...mapGetters([
 &#39;NewArr&#39;
 ]),
 count: function() {
 return this.$store.state.count;
 },
 },
 methods: {
 ...mapActions({
 CHANGE_COUNT: type.CHANGE_COUNT
 }),
 add: function() {
 this.CHANGE_COUNT(type.CHANGE_COUNT);
 }
 }
};
</script>

<style>

</style>
Jiang Zi、tab1 の数字は毎回 1 ずつ増加します。をクリックします。

mudule


vuex のドキュメントはモジュールについて曖昧なので、やはり自分で使用する必要があります。

この例では、同じ名前の 2 つのコンポーネントに対応する 2 つのモジュールを設定しました。もちろん、tab2 を見てください。

import Vuex from 'vuex'
import Vue from 'vue'
import actions from './action'
import mutations from './mutation'
import getters from './getter'
import tab2 from './module/tab2'
import tab3 from './module/tab3'

Vue.use(Vuex)

let state = {
 count: 1,
 arr:[]
}


let store = new Vuex.Store({
 state,
 getters,
 mutations,
 actions,
 modules:{
 tab2,tab3
 }
 
})

export default store
<em>{{count}}</em>
この例では、主にページ上のモジュールに記載されている呼び出し方法を確認します。

まず状態について話しましょう。これは非常に簡単です。このページに次のように記述するだけです。このページに stete がネストされたレイヤーを追加していることがわかります。

アクション、ミューテーション、ゲッターに関しては、一般的な使い方と同じで、違いはありません。

また、ゲッターとアクションでは、rootState を通じてルート構造の状態を取得できます。ミューテーションにはそのようなメソッドはありません。

関連する推奨事項:


Vuex改善学習の共有

Vuexのファミリーバケットのステータス管理について

vuexを実装するための初期化方法

以上が簡単な vuex とモジュール化を学ぶの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
在Vue应用中使用vuex时出现“Error: [vuex] do not mutate vuex store state outside mutation handlers.”怎么解决?在Vue应用中使用vuex时出现“Error: [vuex] do not mutate vuex store state outside mutation handlers.”怎么解决?Jun 24, 2023 pm 07:04 PM

在Vue应用中,使用vuex是常见的状态管理方式。然而,在使用vuex时,我们有时可能会遇到这样的错误提示:“Error:[vuex]donotmutatevuexstorestateoutsidemutationhandlers.”这个错误提示是什么意思呢?为什么会出现这个错误提示?如何解决这个错误?本文将详细介绍这个问题。错误提示的含

Vue2.x中使用Vuex管理全局状态的最佳实践Vue2.x中使用Vuex管理全局状态的最佳实践Jun 09, 2023 pm 04:07 PM

Vue2.x是目前最流行的前端框架之一,它提供了Vuex作为管理全局状态的解决方案。使用Vuex能够使得状态管理更加清晰、易于维护,下面将介绍Vuex的最佳实践,帮助开发者更好地使用Vuex以及提高代码质量。1.使用模块化组织状态Vuex使用单一状态树管理应用的全部状态,将状态从组件中抽离出来,使得状态管理更加清晰易懂。在具有较多状态的应用中,必须使用模块

Vue3中Vuex怎么使用Vue3中Vuex怎么使用May 14, 2023 pm 08:28 PM

Vuex是做什么的?Vue官方:状态管理工具状态管理是什么?需要在多个组件中共享的状态、且是响应式的、一个变,全都改变。例如一些全局要用的的状态信息:用户登录状态、用户名称、地理位置信息、购物车中商品、等等这时候我们就需要这么一个工具来进行全局的状态管理,Vuex就是这样的一个工具。单页面的状态管理View&ndash;>Actions&mdash;>State视图层(view)触发操作(action)更改状态(state)响应回视图层(view)vuex(Vue3.

深入了解vuex的实现原理深入了解vuex的实现原理Mar 20, 2023 pm 06:14 PM

当面试被问vuex的实现原理,你要怎么回答?下面本篇文章就来带大家深入了解一下vuex的实现原理,希望对大家有所帮助!

在Vue应用中使用vuex时出现“Error: [vuex] unknown action type: xxx”怎么解决?在Vue应用中使用vuex时出现“Error: [vuex] unknown action type: xxx”怎么解决?Jun 25, 2023 pm 12:09 PM

在Vue.js项目中,vuex是一个非常有用的状态管理工具。它可以帮助我们在多个组件之间共享状态,并提供了一种可靠的方式来管理状态的变化。但在使用vuex时,有时会遇到“Error:[vuex]unknownactiontype:xxx”的错误。这篇文章将介绍该错误的原因及解决方法。1.错误原因在使用vuex时,我们需要定义一些actions和mu

vue中什么是模块化vue中什么是模块化Dec 23, 2022 pm 06:06 PM

在vue中,模块化就是把单独的一个功能封装到一个模块(文件)中,模块之间相互隔离,但是可以通过特定的接口公开内部成员,也可以依赖别的模块(方便代码的重用,从而提升开发效率,并且方便后期的维护)。模块化开发的好处:1、条理清晰,便于维护;2、不会一次将所有数据请求回来,用户体验感好;3、模块之间相互隔离,但是可以通过特定的接口公开内部成员,也可以依赖别的模块。

在Vue应用中使用vuex时出现“Error: "xxx" has already been declared as a data property.”怎么解决?在Vue应用中使用vuex时出现“Error: "xxx" has already been declared as a data property.”怎么解决?Jun 24, 2023 pm 08:46 PM

在Vue应用的开发过程中,使用vuex来管理应用状态是非常常见的做法。然而,在使用vuex的过程中,有时我们可能会遇到这样的错误提示:“Error:'xxx'hasalreadybeendeclaredasadataproperty.”这个错误提示看起来很莫名其妙,但其实是由于在Vue组件中,使用了重复的变量名来定义data属性和vuex

在Vue应用中使用vuex时出现“TypeError: Cannot read property 'xxx' of undefined”怎么解决?在Vue应用中使用vuex时出现“TypeError: Cannot read property 'xxx' of undefined”怎么解决?Aug 18, 2023 pm 09:24 PM

在Vue应用中使用Vuex是非常常见的操作。然而,偶尔在使用Vuex时会遇到错误信息“TypeError:Cannotreadproperty'xxx'ofundefined”,这个错误信息的意思是无法读取undefined的属性“xxx”,导致了程序的错误。这个问题其实产生的原因很明显,就是因为在调用Vuex的某个属性的时候,这个属性没有被正确

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

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

ホットツール

mPDF

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

PhpStorm Mac バージョン

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール