1. 使用 store 之前,先要安装 vuex
 npm install vuex

2.新建 store 文件夹,再新建 index.js 文件:

import Vue from "vue";
import Vuex from "vuex";

export default new Vuex.Store({
// 数据存放状态,初始值
   state:{  
      count: 100,//定义变量
   },
//mutations是操作state数据的方法的集合,比如对该数据的修改、增加、删除等
   mutations: {
      addCount(state, val = 1) {//操作变量
        state.count += val;
      }
   },
//在mutation方法中进行异步操作,将会引起数据失效。所以提供了Actions来专门进行异步操作,最终提交mutation方法
    actions:{
          addCount(context, payload) {
                context.commit("addCount", payload);
          },
    },
//模块化状态管理
    modules: { 
    },
// 加工state成员给外界
    getters = { 
    }

});
  1. 在main.js 文件中导入,并注册到 vue 根实例中
import store from './store';

new Vue({
    router,
    store,
    render: (h) => h(App),
}).$mount('#app');
  1. 在页面的methods中调用,获取值this.$store.commit(‘addCount’)
this.$store.commit('addCount');  // 加 1
this.$store.commit('subCount');  // 减 1