Vuex进行各个组件的数据共享

学习过程中的记录

Vuex的基础知识

Vuex可以看做一个仓库store，有State，Mutations，Actions组成。

（1）State存储所有的公用数据，组件使用数据时，调动State即可。

（2）Actions中放置异步操作和很复杂的批量的同步操作，组件通过调用Dispatch方法来操作Actions，Actions通过调用Commit方法来操作Mutations；

（3）Mutations中放置的是一个对State同步的修改。

基础配置

1.1.在src目录下，store文件夹下新建index.js文件

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

Vue.use(Vuex)
export default ({
  state: {},   //  仓库存储数据的地方
  getters: {},
  mutations: {}, // mutations：修改state的唯一手段
  actions: {}, // actions:处理action，可以书写业务逻辑，也可以处理异步，但不能修改state
  modules: {}
})

1.2.在main.js中引入index.js，并在实例中传入store。

// main.js
import store from './store/index.js'
 
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

使用