Vuex深入理解

Posted 2021-01-01 knuzy

store下的index.js:

 1 import Vue from ‘vue‘
 2 import Vuex from ‘vuex‘
 3 
 4 Vue.use(Vuex)
 5 
 6 let store = new Vuex.Store({
 7   state: {
 8     count: 100
 9   },
10   mutations: {
11     addIncrement (state, payload) {
12       state.count += payload.n
13     },
14     deIncrement (state, payload) {
15       state.count -= payload.de
16     }
17   },
18   actions: {
19     addAction (context) {
20       setTimeout(() => {
21         // 改变状态，提交Mutations
22         context.commit(‘addIncrement‘, { n: 5 })
23       }, 1000)
24     }
25   }
26 })
27 
28 export default store

increment.vue文件中的js部分：

 1 <script>
 2 export default {
 3   computed: {
 4     num () {
 5       return this.$store.state.count
 6     }
 7   },
 8   methods: {
 9     addHandle () {
10       this.$store.dispatch(‘addAction‘)
11     },
12     deHandle () {
13       this.$store.commit({
14         type: ‘deIncrement‘,
15         de: 10
16       })
17     }
18   }
19 }
20 </script>