vuex
main.js: // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import Vuex from 'vuex' import HomeStore from './views/home/home-store' Vue.config.productionTip = false Vue.use(Vuex) /* eslint-disable no-new */ const store = new Vuex.Store({ modules:{ HomeStore, } }); export default store; new Vue({ el: '#app', router, store, template: '<App/>', components: { App } })
home.vue <template> <div> <div class="m-detail"> <div class="add" @click="addCount">添加+</div> <div class="num">{{this.$store.getters.getStateCount}}</div> <div class="release" @click="releaseCount">减少-</div> </div> </div> </template> <script> // import mapState,mapActions,mapGetters from 'vuex'; export default { name: 'HelloWorld', data () { return { msg: 'Welcome to Your Vue.js App', } }, computed: { count () { //return this.$store.state.HomeStore.num; } }, methods:{ addCount(){ this.$store.commit('add'); //this.$store.dispatch('addDetail') }, releaseCount(){ this.$store.commit('release'); // this.$store.dispatch('releaseDetail') } } } </script>
home-store.js: const state = { num: 0, } const getters = { getStateCount(state){ return state.num+1; } } const mutations = { add(state){ return state.num++; }, release(state){ state.num--; if(state.num<0){ state.num = 0; } return state.num; } } const actions = { addDetail(ent){ ent.commit('add'); }, releaseDetail(ent){ ent.commit('release'); } } export default { state, getters, mutations, actions }
参考连接:https://baijiahao.baidu.com/s?id=1618794879569468435&wfr=spider&for=pc