Vuex系列之（四）搭建Vuex环境

搭建Vuex环境

• 安装Vuex

  npm i vuex@3
  

  注：目前使用的是vue 2，所以要安装vuex 3

• 创建src/vuex/store.js或src/store/index.js，二选一，js文件的内容都是一样的，该文件用于创建Vuex中最为核心的store

  //引入Vue核心库
  import Vue from 'vue'
  //引入Vuex
  import Vuex from 'vuex'
  // 应用Vuex插件
  // 这行代码执行之后，创建Vue实例的时候就可以传入一个store配置项，vm和vc身上会有一个$store
  // 必须在创建store实例之前调用Vue.use(Vuex)
  Vue.use(Vuex)
  
  //准备actions对象——响应组件中用户的动作
  const actions = {}
  //准备mutations对象——修改state中的数据
  const mutations = {}
  //准备state对象——保存具体的数据
  const state = {}
  
  //创建并暴露store
  export default new Vuex.Store({
  	actions,
  	mutations,
  	state
  })
  

• 在main.js中创建vm时传入store配置项

  ......
  //引入store，如果创建的文件名是index.js，引入的路径中可以不用具体到文件名，默认就会找index.js
  // import store from './store/index'
  import store from './store'
  ......
  
  //创建vm
  //如果创建Vue实例时添加了自行定义的配置项，Vue会将这些自行定义的配置项扔掉
  new Vue({
  	el:'#app',
  	render: h => h(App),
  	store
  })
  

vue-cli是如何解析import语句的？

vue-cli会按照import语句出现的顺序将文件中的所有import语句汇总顶部

为什么必须在创建store的文件中应用Vuex？

​ 首先，Vuex要求必须在创建store实例之前应用Vuex插件，如果将应用Vuex写在main.js中，无法保证Vue.use语句在import语句前执行，这是因为脚手架解析import语句时会汇总所有的import语句到顶部，这就决定了import语句一定会在Vue.use语句执行前执行，也就是说，一定是先创建store实例再应用Vuex插件，所以必须在创建store的文件中应用Vuex。