引用
在一個模塊化的打包系統(tǒng)中，您必須顯式地通過 Vue.use() 來安裝 Vuex：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
當(dāng)使用全局 script 標(biāo)簽引用 Vuex 時(shí)坟漱，不需要以上安裝過程。
項(xiàng)目結(jié)構(gòu)
Vuex 并不限制你的代碼結(jié)構(gòu)。但是阵面，它規(guī)定了一些需要遵守的規(guī)則：
- 應(yīng)用層級的狀態(tài)應(yīng)該集中到單個 store 對象中。
- 提交 mutation 是更改狀態(tài)的唯一方法，并且這個過程是同步的样刷。
- 異步邏輯都應(yīng)該封裝到 action 里面仑扑。
對于大型應(yīng)用，我們會希望把 Vuex 相關(guān)代碼分割到模塊中置鼻。下面是項(xiàng)目結(jié)構(gòu)示例：
├── index.html
├── main.js
├── api
│ └── ... # 抽取出API請求
├── components
│ ├── App.vue
│ └── ...
└── store
├── index.js # 我們組裝模塊并導(dǎo)出 store 的地方
├── actions.js # 根級別的 action
├── mutations.js # 根級別的 mutation
└── modules
├── cart.js # 購物車模塊
└── products.js # 產(chǎn)品模塊
簡單的Store
store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
actions: {
updataCount ( {commit} ) {
setTimeout(function(){
commit('UPDATACOUNT')
},3000)
}
},
getters: {
toDouble: (state) =>{
return state.count + 2
}
},
state: {
count: 1
},
mutations:{
UPDATACOUNT: (state) => {
state.count++
}
}
})
app.vue
<template>
<div id="app">
<div>{{ count }}</div>
<button @click="add()">count+1</button>
</div>
</template>
export default {
name: 'vue-app',
computed: {
count (){
return this.$store.getters.toDouble
}
},
methods: {
add () {
this.$store.commit('UPDATACOUNT')
}
}
}
在methods的add方法中,通過$store.commit來調(diào)用store中mutations里設(shè)置的方法
