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
// mutation.js import type from './mutation-type' let mutations = { [type.CHANGE_COUNT](state) { state.count++ } } export default mutationsindex.js ファイル:
// action.js import type from './mutation-type' let actions = { [type.CHANGE_COUNT]({ commit }) { commit(type.CHANGE_COUNT) } } export default actionsvuex は補助関数と呼ばれるものを提供しており、その利点によりページでの作業が可能になります。使用する必要があるものを表示したり、使用時に記述するコンテンツを減らすこともできますが、これは必須ではありません。自分のニーズに応じて使用できます。 効果が発揮される場所が異なるので注意が必要です。 ...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([ 'NewArr' ]), 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
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 とモジュール化を学ぶの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![在Vue应用中使用vuex时出现“Error: [vuex] do not mutate vuex store state outside mutation handlers.”怎么解决?](https://img.php.cn/upload/article/000/000/164/168760467048976.jpg)
在Vue应用中,使用vuex是常见的状态管理方式。然而,在使用vuex时,我们有时可能会遇到这样的错误提示:“Error:[vuex]donotmutatevuexstorestateoutsidemutationhandlers.”这个错误提示是什么意思呢?为什么会出现这个错误提示?如何解决这个错误?本文将详细介绍这个问题。错误提示的含

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

Vuex是做什么的?Vue官方:状态管理工具状态管理是什么?需要在多个组件中共享的状态、且是响应式的、一个变,全都改变。例如一些全局要用的的状态信息:用户登录状态、用户名称、地理位置信息、购物车中商品、等等这时候我们就需要这么一个工具来进行全局的状态管理,Vuex就是这样的一个工具。单页面的状态管理View–>Actions—>State视图层(view)触发操作(action)更改状态(state)响应回视图层(view)vuex(Vue3.
![在Vue应用中使用vuex时出现“Error: [vuex] unknown action type: xxx”怎么解决?](https://img.php.cn/upload/article/000/887/227/168766615217161.jpg)
在Vue.js项目中,vuex是一个非常有用的状态管理工具。它可以帮助我们在多个组件之间共享状态,并提供了一种可靠的方式来管理状态的变化。但在使用vuex时,有时会遇到“Error:[vuex]unknownactiontype:xxx”的错误。这篇文章将介绍该错误的原因及解决方法。1.错误原因在使用vuex时,我们需要定义一些actions和mu

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

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

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


ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

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

人気の記事

ホットツール

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

SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン

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

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

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