vueでのファイルの使い方

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 &#39;store.js&#39; // 老样先要引入
 export default{
  store:store, // 定义
  computed: { //实时监听
    numbertxt () { // 实时监听在store.js里的值改变
     return store.state.number
    }
   },
  methods:{
   addfun(num){
    store.commit(&#39;addFun&#39;,num) 
    //显式的提交 (commit) mutation里的方法来改变值
   }
  }
｝
</script>

理解できない人や好きでない人のために、少し複雑な例は以上です。 vue WeChat (nihaomeili87) に私を追加していただければ、一緒に進歩していきましょう!

上記は私があなたのためにまとめたものです。

関連記事:

vueモバイル端末に日付選択コンポーネントを実装する

指定したJSファイルをwebpackに個別にパッケージ化する方法

WeChatアプレットに円形のプログレスバーを実装する方法

動的にインポートされる実装Webpack 内のファイル

トリックの 3 つの基本モード

JavaScript で渡す vue ルート パラメーター (詳細なチュートリアル)

以上がvueでのファイルの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。