【Vue】Vuex的安装和引入实例

一、安装Vuex

npm i vuex@3

二、在src新建文件夹store和文件index.js

三、main.js中引用vuex和store

// 引入Vue
import Vue from 'vue'
// 引入app组件，它是所有组件的父组件
import App from './App.vue'
// 引入VueRouter插件
// eslint-disable-next-line no-unused-vars
import VueRouter from 'vue-router'

// 引入Vuex
// eslint-disable-next-line no-unused-vars
import Vuex from 'vuex'

// 引入store
import store from './store/index.js'

// ElementUI

import ElementUI from 'element-ui' //element-ui的全部组件
import 'element-ui/lib/theme-chalk/index.css'//element-ui的css
Vue.use(ElementUI) //使用elementUI


// 关闭vue生产提示
Vue.config.productionTip = false
// 创建vue实例对象 -- vm
const vm = new Vue({
  el: "#app",
  // 完成了这个功能：将APP组件放入窗口中
  render: h => h(App),
  router:'hello',
  store:store,
  beforeCreate() {
    Vue.prototype.$bus = this;
  },

})

console.log(vm);

四、index.js中增加actions、mutations、state属性

// 该文件用于创建Vuex中最为核心的store


// 引入Vue和Vuex

import Vue from 'vue'
import Vuex from  'vuex'

// 使用Vuex插件
Vue.use(Vuex)

// 准备actions - 响应组件中的动作
const actions ={}

// 准备mutations - 操作数据(state)

const mutations ={}

// 准备actions - 存储数据

const state={}


// 创建并暴露store

export default new Vuex.Store({
    actions,
    mutations,
    state,
})

console.log(this)