Vuex深い学習---基礎概念
Vuex深い学習---基礎概念
VuexはVue専用です.jsアプリケーション開発のステータス管理モード.
集中型ストレージ管理アプリケーションのすべてのコンポーネントのステータスを採用し、対応するルールでステータスが予測可能な方法で変化することを保証します.
一.特徴:
二.導入:1.プライマリ・ファイルへの直接導入
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で導入できます.
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で導入できます.