一个简单的global event bus
所以，Vuex应该是复杂情况下方便非父子组件的通信的状态管理模式。
第一步：使用NPM安装
npm install vuex --save
第二步：引用
我在src/目录下新建了一个叫store的文件夹，专门用来放Vuex，如图所示：
在index.js里引入Vuex：
// 引入vue 和 Vuex
import Vue from 'vue';
import Vuex from 'vuex';
// 在vue中使用Vuex
Vue.use(Vuex);
// 将 store 分割成模块（module）
const store = new Vuex.Store({
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }});
export default store
第三步：在main.js里全局定义：
import Vue from 'vue'
import store from './store'
Vue.use(store)
new Vue({
el: '#app',
router,
// 就可以this.$store引用了
store,
template: '<App/>',
components: { App }
})
网友评论