爱网站排行多用户网上商城系统

src/
├── router/              # 路由配置
│   └── index.js         # 路由主文件
├── store/               # Vuex状态管理
│   ├── index.js         # Store主入口
├── views/               # 路由页面组件
│   ├── HomeView.vue
│   ├── AboutView.vue
├── App.vue              # 根组件
└── main.js              # 应用入口文件

 store/index.js :

import Vue from "vue";
import Vuex from "vuex";Vue.use(Vuex);export default new Vuex.Store({state: {count: 0, //变量},getters: {},mutations: {increment(state) {//修改状态-加state.count += 1;},decrement(state) {state.count -= 1;},},actions: {increment({ commit }) {commit("increment"); //调用mutation},decrement({ commit }) {commit("decrement"); // 调用 mutation},},modules: {},
});

main.js:

import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'Vue.config.productionTip = falsenew Vue({router,store,render: function (h) { return h(App) }
}).$mount('#app')

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'Vue.use(VueRouter)const routes = [{path: '/',name: 'home',component: HomeView},{path: '/about',name: 'about',// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited.component: function () {return import(/* webpackChunkName: "about" */ '../views/AboutView.vue')}}
]const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes
})export default router

 App.vue:

<template><div id="app"><router-view></router-view></div>
</template><script></script><style lang="scss"></style>

/views/HomeView.vue:

<template><div><p>count now {{ count }}</p><button @click="increment">+</button><button @click="decrement">-</button><router-link to="/about">Go to About</router-link></div>
</template><script>
import { mapState, mapActions } from "vuex";
export default {computed: {//使用mapState映射state...mapState(["count"]),},methods: {//使用mapActions映射actions...mapActions(["increment", "decrement"]),},
};
</script><style lang="scss"></style>

/views/AboutView.vue:

<template><div class="about"><h1style="font-style: italic;font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande','Lucida Sans Unicode', Geneva, Verdana, sans-serif;">THE COUNTER {{ count }}</h1><router-link to="/">Back to Home</router-link></div>
</template>
<script>
import { mapState } from "vuex";
export default {computed: {...mapState(["count"]),},
};
</script>