Vue.use(vuex)
const store = new Vuex.Store({
state: {},
getter: {},
action:{},
mutations:{}
})
store.commit()
Vuex 通過store選項(xiàng)惭聂，從根組件里注入到每一個(gè)子組件里辜纲，因此不需要在每個(gè)子組件里頻繁調(diào)用store拦耐，子組件通過this.$store 訪問到store
const app = new Vue({
el: '#app',
// 把 store 對象提供給 “store” 選項(xiàng)，這可以把 store 的實(shí)例注入所有的子組件
store,
components: { Counter },
template: `
<div class="app">
<counter></counter>
</div>
`
})
調(diào)用mapstate輔助函數(shù)
computed: {
localComputed () { /* ... */ },
// 使用對象展開運(yùn)算符將此對象混入到外部對象中
...mapState({
// ...
})
}
這樣我們就可以在子組件里直接使用這些狀態(tài)了扫俺，不是說所有的狀態(tài)都要存放在Vuex的state里面固翰，有些局部組件可以保留自身的狀態(tài)
getter
Vuex 允許我們在 store 中定義“getter”（可以認(rèn)為是 store 的計(jì)算屬性）羹呵。就像計(jì)算屬性一樣冈欢，getter 的返回值會根據(jù)它的依賴被緩存起來凑耻，且只有當(dāng)它的依賴值發(fā)生了改變才會被重新計(jì)算送火。
getters里的函數(shù)接受state作為其第一個(gè)參數(shù)
Getter 會暴露為store.getters 對象
可以在任何組件中使用getters里的屬性
computed: {
x() {
return this.$store.getters.doneTodosCount
}
}
mapGetters 輔助函數(shù)僅僅是將 store 中的 getter 映射到局部計(jì)算屬性
Mutation
更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation。Vuex 中的 mutation 非常類似于事件：每個(gè) mutation 都有一個(gè)字符串的 事件類型 (type) 和 一個(gè) 回調(diào)函數(shù) (handler)弃衍。這個(gè)回調(diào)函數(shù)就是我們實(shí)際進(jìn)行狀態(tài)更改的地方坚俗，并且它會接受 state 作為第一個(gè)參數(shù)：
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
increment (state) {
// 變更狀態(tài)
state.count++
}
}
})
不能直接調(diào)用mutation.handler 方法，需要使用 store.commit 來觸發(fā)喚醒mutation.handler
store.commit('increment')
提交載荷Payload
向store.commit傳入額外的參數(shù)速缆，即mutation的載荷(payload)
mutations: {
increment (state, n) {
state.count += n
}
}
store.commit('increment', 10)
一般payload 應(yīng)該是一個(gè)對象恩闻，這樣屬性更加易讀
規(guī)則
既然 Vuex 的 store 中的狀態(tài)是響應(yīng)式的，那么當(dāng)我們變更狀態(tài)時(shí)破停，監(jiān)視狀態(tài)的 Vue 組件也會自動更新。這也意味著 Vuex 中的 mutation 也需要與使用 Vue 一樣遵守一些注意事項(xiàng)：
最好提前在你的 store 中初始化好所有所需屬性真慢。
當(dāng)需要在對象上添加新屬性時(shí)理茎，你應(yīng)該
使用
Vue.set(obj, 'newProp', 123), 或者-
以新對象替換老對象。例如朗鸠，利用 stage-3 的對象展開運(yùn)算符我們可以這樣寫：
state.obj = { ...state.obj, newProp: 123 }
mutation必須是同步函數(shù)
在組件中提交 Mutation
你可以在組件中使用 this.$store.commit('xxx') 提交 mutation础倍，或者使用 mapMutations 輔助函數(shù)將組件中的 methods 映射為 store.commit 調(diào)用（需要在根節(jié)點(diǎn)注入 store）。
import { mapMutations } from 'vuex'
export default {
// ...
methods: {
...mapMutations([
'increment', // 將 `this.increment()` 映射為 `this.$store.commit('increment')`
// `mapMutations` 也支持載荷：
'incrementBy' // 將 `this.incrementBy(amount)` 映射為 `this.$store.commit('incrementBy', amount)`
]),
...mapMutations({
add: 'increment' // 將 `this.add()` 映射為 `this.$store.commit('increment')`
})
}
}
Action
action 不同的地方在于
Action 提交的是 mutation扰楼，而不是直接變更狀態(tài)。
Action 可以包含任意異步操作项栏。
store.dispatch 可以處理被觸發(fā)的 action 的處理函數(shù)返回的 Promise，并且 store.dispatch 仍舊返回 Promise：
兩種略微不同的調(diào)用方法
computed: {
...mapGetters(["isLogin", "user"])
},
computed: mapGetters([
'evenOrOdd'
]),
methods: mapActions([
'increment',
'decrement',
'incrementIfOdd',
'incrementAsync'
])
