一、安装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)