項目中新增vuex可以使用命令
git add vuex
vuex是專門為vue.js應用程序開發(fā)的狀態(tài)管理方式。
vuex有一個核心就是store（倉庫 ）逸雹。vuex的核心有state营搅、mutation、action峡眶。
state包含了全部的應用層級狀態(tài).
state的改變剧防，主要通過commit一個mutation。Mutation里的函數(shù)必須為同步辫樱，如果是異步 需要使用dispatch一個action峭拘。
新建一個store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count:1
},
mutations: {
increment(state){
state.count ++
},
decrement(state){
state.count --
}
},
actions: {
increment:({commit})=>{
commit('increment')
},
decrement:({commit})=>{
commit('decrement')
}
},
})
在main.js引入
import Vue from 'vue'
import App from './App.vue'
import store from './store/modules/index'
Vue.config.productionTip = false
new Vue({
store,
render: h => h(App)
}).$mount('#app')
模板
<template>
<div>
<!-- 這是單份的 -->
<button @click="increment">+</button>
{{$store.state.count}}
<button @click="decrement">-</button>
</div>
</template>
<script>
// import {mapActions} from 'vuex'
export default {
// methods: mapActions([
// 'increment',
// 'decrement'
// ]),
methods: {
...mapActions([
'increment',
'incrementBy'
])
},
}
</script>
<style scoped>
</style>
mapMutation
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')`
})
}
}
