vuex-main.js文件

vuex-main.js文件

src/main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false


// 配置vuex的步骤
// 1. 安装  npm i vuex
// 2. 导入
import Vuex from 'vuex'
// 3. 注册
Vue.use(Vuex)
// 4. 初始化
const store = new Vuex.Store({
  // 配置项

  // 申明数据
  state: {
    // 申明数据  相当于vue实例选项中的data
    count: 1
  },

  // 修改数据
  mutations: {
    // 自增 count 数据
    // payload 形参  载荷（运输数据）
    increment (state, n) {
      // state.count ++
      state.count  += n
    }
  },

  // 获取数据
  actions: {
    // 异步获取数据函数
    // context 运行上下文  当前运行代码中的this  vuex实例
    asyncGetData (context, params) {
      // 异步获取数据（需要接口）  模拟异步获取数据
      // 将来 调用后台的接口  需要动态传参
      console.log(params)
      setTimeout(()=>{
        // 获取数据成功
        const data = 10086
        // 把数据提交mutations 
        // this不能调用到 mutations 中申明的函数
        context.commit('increment',data)
      },2000)
    }
  }
})
// 5. 挂载根实例  其他组件访问vuex提供功能
new Vue({
  store,
  render: h => h(App),
}).$mount('#app')