Vuex深い学習---基礎概念

1375 ワード

Vuex深い学習---基礎概念
VuexはVue専用です.jsアプリケーション開発のステータス管理モード.
集中型ストレージ管理アプリケーションのすべてのコンポーネントのステータスを採用し、対応するルールでステータスが予測可能な方法で変化することを保証します.
一.特徴:
1. Vuex           。  Vue     store         
     store         ,                  。
2.         store     。   store               mutation    
                        

二.導入:1.プライマリ・ファイルへの直接導入
    import vuex from 'vuex'
    
    Vue.use(vuex)
    //  vuex   Vue   
    const store = new vuex.store({ 
      state: {  
        count: 0
      }
    })
    
    new Vue ({
      vuex,
      render: h => h(App)
    }).$mount('#app')

2.モジュール式
├── index.html ├── main.js ├── components │ ├── App.vue │ └── … └── store ├── index.js#モジュールを組み立ててstoreの場所をエクスポートします.js#ルートレベルのaction├-mutations.js#ルートレベルのmutation└-modules#サブモジュール├-cart.js#ショッピングカートモジュールjs#製品モジュール
①. srcディレクトリの下にstoreフォルダを新規作成し、indexを新規作成します.jsこれはstoreエントリファイルです
      import Vue from 'vue'
      import vuex from 'vuex'
      Vue.use(vuex)
      export default new vuex.store({
        state:{
          count: 0
        }
      })

②. プライマリ・ファイルへのインポート
   import store from './store'
   new Vue({
     store,
     render: h => h(App)
   }).$mount('#app')

③. 必要に応じて、下に分割し続け、importで導入できます.