この。$のstore.commitでvuex

プロジェクトがシンプルであればVueのプロジェクトは、コンポーネント間のデータ転送は、サンズ小道具や$ EMITを転送する他の方法を使用することができます

しかし、中型アイテム場合、しばしば関連していない、多くのリサイクル複数のデータ構成要素を必要と平行成分との間でデータを渡す必要があります。プロジェクトコードを作るために上記の方法を使用するには、この時間は退屈し、コンポーネントの再利用を助長しないなり、結合度を増加させます。

Vueの状態管理ツールは、この問題に対する完璧なソリューションをVuex。

その後、一つの成分からと：vuex公式サイトの下に見えた、それは十分に理解されていない、時には私たちは、動的なデータを取得する必要があります（唯一のアセンブリ内の範囲、独立して制御され、「コンポーネントレベル」と呼ばれる公式サイト）「アプリケーションレベル」と呼ばれる公式サイトに配置したい場所（変更後、いつでもどこでもプロジェクトの動的な変更に取得することができ、行いますVUEは、プロジェクト全体を更新しています）。これは私が最初にVUEを学ぶ理由は、私はフロントエンドのデータ構造のライブラリーになりたくないです。。。

ステップによって私の小さな例のステップを見てみましょう

まず、私はvue2.0にvue1.0から移行されたvuex会社のプロジェクトをインストールダウンロードし、VUEをインストール

NPMインストールvuex --save

私たちは、モジュールおよびエクスポート店を組み立てるために使用されるこの文書では次に、ファイルのフォルダを新しいフォルダストアを兄弟のindex.html新しいindex.jsファイル

[まず、データストアへのアクセス]

1つのヴュー'VUE'からインポート
 2 Vuex 'vuex'からインポート
 。3   
。4  // VUE "使用"を伝えるvuex 
。5  Vue.use（Vuex）
 。6   
。7  // アプリケーションの起動時に初期状態を保持するオブジェクトを作成
8  // 必要に状態を維持する
9。のconstは=ストア新新Vuex.Store（{
 10    状態：{
 11      // アプリの初期起動時間のグローバル値の初期状態に置く
12がある      {「名前は」：「私は最初のデータvuexだ」bankInfを、 "ID"：100、 " bankName"： " 中国の銀行"}
 13    }
 14  }）
 15  // 統合初期状態と変更機能は、我々は、所望の店舗を取得し
16  // この時点で、ストアが我々のアプリケーションに接続することができます。
17輸出デフォルトのストア

VUEのルート・ファイルに店をサインアップするので、すべてのコンポーネントは、データストアに使用することができます

私のプロジェクトファイル構造：

main.jsファイルにサインアップストア

1つの 'VUE'からインポートヴュー
 2 './App'からインポートアプリ
 3 './router'からインポートルータ
 4 './../store/index'からインポート店
 5   
6  / * 全く新しいをeslint-ディセーブル* / 
7  新ヴュー（{
 8    EL '#app' 、
 9    ルータ、
 10    店舗、
 11    テンプレート： '<APP />' 、
 12の   成分：{アプリケーション}
 13 }）

这样简单的第一步就完成了，你可以再任意组件中使用store中的数据，使用方法也很简单，就是使用计算属性返回store中的数据到一个新属性上，然后在你模板中则可以使用这个属性值了：

任意组件中：

1 export default {
2   ...
3   computed: {
4     bankName() {
5       return this.$store.state.bankInf.bankName;
6     }
7   },
8   ...
9 }

在模板中可以直接使用bankName这个属性了，也就是store中的中国银行

【二、在组件中修改store中的状态】

在任意组件中添加html模板

1 <div class="bank">
2     <list-header :headerData="bankName"></list-header>
3     04银行详情页面
4     <input  name="" v-model="textValue">
5     <button type="button" name="获取数据" @click="newBankName"></button>
6 </div>

然后组件中提交mutation

 1 export default {
 2   ...
 3   computed: {
 4     bankName() {
 5       return this.$store.state.bankInf.bankName;
 6     }
 7   },
 8   methods: {
 9     newBankName: function() {
10       this.$store.commit('newBankName', this.textValue)
11     }
12   }
13  ...   
14 }



在store中的index.js中添加mutations：

 1 const store = new Vuex.Store({
 2   state: {
 3     // 放置初始状态 app启动的时候的全局的初始值
 4     bankInf: {"name":"我是vuex的第一个数据","id":100,"bankName":"中国银行"},
 5     count:0
 6   },
 7   mutations: {
 8     newBankName(state,msg) {
 9       state.bankInf.bankName = msg;
10     }
11   }
12 })

这样你发现，在点击提交按钮的时候，页面已经显示你修改的数据了，并且所有复用这个组件的地方的数据全都被vue更新了；

如果在使用中发现报错this.$store.commit is not a function ，请打开你项目的配置文件package.json，查看你正在使用的vuex的版本，我正在使用的是vuex2.0,

如果想删除旧版本的vuex并安装新版本的vuex请使用

npm rm vuex --save

然后安装最新的vuex

npm install vuex --save

即可解决这个错误，或者是查看vuex官网api修改提交mutation的语句

原文地址： https://blog.csdn.net/jingtian678/article/details/81481075

おすすめ