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>
更多专业前端知识,请上 【猿2048】www.mk2048.com