インストール
インストールVUE-cliのNPM I -g VUE-CLI
ビルドディレクトリVUEのinitのWebPACK
開発環境NPMの実行DEVを開始
スタートコマンド
NPM -g VUE-CLIをインストール
ビューのWebPACKのinit-プロジェクトビュー
CDプロジェクトビュー
NPM実行DEV
VUE-cliの単一ファイルコンポーネント
リングの使用コンポーネント：コンポーネントの導入、登録コンポーネントは、コンポーネントを使用します
はじめ手段：「./components/hello」からインポートこんにちは
登録コンポーネント：コンポーネント：{こんにちは：こんにちは}
使用コンポーネント：
Vuex
1.集中ストレージ管理状態
予測可能な方法で変化する2
過渡状態の内部構成要素：（データフィールド）に使用状態のみ一成分
アプリケーションレベルのステータス：共通の構成要素の複数のステータス
どのような状況Vuexの使用では
1.複数のビューは同じ状態に依存
変更する同じ状態のニーズの異なるビューから2行動
インストールVuex
NPM I vuex -save
下記のsrcフォルダ内stroeフォルダを作成するには、
その後、次のフォルダストアインデックス、JSファイルの作成、
コンポーネントのindex.jsの導入を
import Vue from 'vue'
import Vuex from 'vuex'
プラグとして使用
Vue.use（Vuex）
次に、ルート・インスタンス内部に注入Main.js
注入ルートインスタンス
{店}
コンポーネントに保管
index.jsフォルダ定義された状態ストアで
let store = new Vuex.Store({
//定义应用的单一状态书,用一个对象就包含了全部的应用层级转态
state: {
count: 110 //定义一个状态
}
})
状態を使用するコンポーネントでは、2つの方法があります
<script>
export default {
//data 只能在本组件被改变
data() {
return {
n: this.$store.state.count //n的初始值从vuex的state中拿
}
}
}
</script>
若しくは
<p></p>
##ステータス変更
突然変異（状態を変更するための唯一の方法）：変更ステータスには、記録することができる突然変異にコミットする必要があり、変異状態を同時に更新する必要があります。
アクション（非同期動作）：農産物結果に非同期操作;アクションが直接状態を変更するのではなく、突然変異を提出しています
突然変異状態の変更
index.jsは、ストアのステータスを変更します
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
//定义store
//vuex中的状态是响应的
let store = new Vuex.Store({
state: {
count: 110 //定义一个状态
},
mutations: {
updatedCount(state, payload) { //改变state状态
state.count += payload.add;
}
}
})
export default store
変更をコミットコミット
<script>
export default {
methods: {
changeCount() 大专栏 多个计数器在Vuex中的状态ss="p">{
this.$store.commit('updatedCount',{
add: 30
})
}
}
}
</script>
//getter(派发的状态): 抽离操作转态的逻辑,可被多组件使用
getters : {
totals(state){
//reduce 数组的方法
//reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值,0表示和初始值为0.
return state.shopList.reduce((n,item) => n + item.count,0)
}
}
アクション（非同期動作）：農産物結果に非同期操作;アクションが直接状態を変更するのではなく、突然変異を提出しています
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
//mock数据
const shopList = [
{
id: 123,
count: 2,
},
{
id: 456,
count: 3
}
]
//定义store
//vuex中的状态是响应的
let store = new Vuex.Store({
//定义应用的单一状态书,用一个对象就包含了全部的应用层级转态
state: {
shopList //定义一个状态
},
//getter(派发的状态): 抽离操作转态的逻辑,可被多组件使用
getters : {
totals(state){
//reduce 数组的方法
//reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值,0表示和初始值为0.
return state.shopList.reduce((n,item) => n + item.count,0)
}
},
//要使改变状态可被记录,必须要commit一个mutation; mutation必须是同步更新转态.
mutations: {
//只要提交mutation就有记录,如果mutation中有异步操作,记录的还是之前的值
updatedCountById(state,payload) { //改变state状态
/*setTimeout(() => {
let item = state.shopList.find(item => item.id == payload.id)
item.count += 1;
},3000);*/
let item = state.shopList.find(item => item.id == payload.id);
item.count += 1;
},
reduceCountById(state,payload) {
let item = state.shopList.find(item => item.id == payload.id)
console.log(payload)
if(item.count <= 0 ){
alert('数量不能少于0');
return false;
}
item.count -=1;
}
},
actions: {
updateCountAction(store, parmas) {
//异步操作放在这里
setTimeout(() => {
store.commit('updatedCountById', parmas)
},1000)
}
}
})
export default store
vuex使用の法理
原則：
- 各アプリケーションのインスタンスだけで店を含むことになります
- 店舗のステータスを変更する唯一の方法は、変異を提出することです
- 突然変異は、機能を同期させる必要があります
- アクションは、任意の非同期操作を含むことができ
- アクションは、直接、状態を変更するのではなく、突然変異を提出しています
githubの住所：https://github.com/yyyyama/Vue-Project