console
//仓库
const INCREASE_COUNT = 'INCREASE_COUNT';
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
[INCREASE_COUNT](state) {
state.count++;
}
},
actions: {
add({ commit }) {
setTimeout(() => {
commit(INCREASE_COUNT);
},1000);
},
test({commit}){
return new Promise((resolve,reject) => {
setTimeout(() => {
commit(INCREASE_COUNT);
resolve();
},1000);
});
}
}
});
store.dispatch('test').then(() => {
console.log('resolve');
},() => {
console.log('reject');
});
//foo组件
const foo = {
template: `
<div>
count: {{ count }}
<button @click="add">+ADD</button>
</div>
`,
computed: {
...Vuex.mapState(['count'])
},
methods: {
...Vuex.mapActions({
add: 'test'
})
}
};
//App组件
const App = {
template: `
<div>
<foo></foo>
<div>
`,
components: {
foo
}
};
//挂载App
new Vue({
el: '#app',
store,
render: h => h(App)
});
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/vuex"></script>
<div id="app"></div>