vuex自存例子

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 = false

new 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">
    <h1
      style="
        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>