Vuex は、Vue.js アプリケーション専用に開発された状態管理パターンです。この記事では主に Web フロントエンドの vue を紹介します: vuex を単一のファイルとして使用する方法 必要な友達はそれを参照してください
Vuex とは何ですか?
Vuex は、Vue.js アプリケーション専用に開発された状態管理パターンです。集中ストレージを使用してアプリケーションのすべてのコンポーネントのステータスを管理し、対応するルールを使用してステータスが予測可能な方法で変化することを保証します。 Vuex は、Vue の公式デバッグ ツール devtools 拡張機能にも統合されており、ゼロ構成のタイムトラベル デバッグ、状態スナップショットのインポートおよびエクスポートなどの高度なデバッグ機能を提供します。
前回は、足し算と引き算の例を用いて、vuex の基本的な使い方と、それがどのような状況で使用されるかを説明しました。前回はこの例をコンポーネントで簡単に説明しましたが、今回はプロジェクト全体のステータスを一元管理するためにvuexを別ファイルに抽出しました。
前回も言いましたが、プロジェクトが十分に大きい場合は、vuex を使用してプロジェクト全体のステータスを管理するのが最善です。小規模なプロジェクトの場合は、すべての人にお勧めできません。さて、これ以上の苦労はせずに、コードは次のとおりです:
プロジェクトの準備がすべて完了し、vue-cli、webpack、vuex、router などをインストールしたら、
最初のステップは、store.js という名前の新しいファイルを作成することです。以下のように:
import Vue from 'vue' //引入vue import Vuex from 'vuex' // 引入vuex Vue.use(Vuex) // 注册vuex export default new Vuex.Store({ // 暴露与new vuex state: { // 相当于vue里data 存放整个项目的各个状态 number: 0 }, mutations: { //相当于vue里的methods放方法的,定义一些可以用来调用和修改state里的状态值 addFun (state,num) { state.number = num } } })
この状態管理ファイルが作成されました。次のステップはそれを呼び出す方法です
<template> {{numbertxt}} <button @click="addfun(1)">按钮1</button> <button @click="addfun(2)">按钮2</button> </template> <script> import store from 'store.js' // 老样先要引入 export default{ store:store, // 定义 computed: { //实时监听 numbertxt () { // 实时监听在store.js里的值改变 return store.state.number } }, methods:{ addfun(num){ store.commit('addFun',num) //显式的提交 (commit) mutation里的方法来改变值 } } } </script>
理解できない人や好きでない人のために、少し複雑な例は以上です。 vue WeChat (nihaomeili87) に私を追加していただければ、一緒に進歩していきましょう!
上記は私があなたのためにまとめたものです。
関連記事:
指定したJSファイルをwebpackに個別にパッケージ化する方法
JavaScript で渡す vue ルート パラメーター (詳細なチュートリアル)
以上がvueでのファイルの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。