搭建vueX环境

 总结：

//引入Vue核心库
import Vue from 'vue'
//引入 Vuex
import Vuex from 'vuex'
//应用vuex插件
Vue.use(Vuex)
//准备actions对象---响应组件中用户的动作
const actions = {

}
//准备mutation对象---修改state中的数据
const mutations = {

}
//准备state对象---保存具体的数据
const state = {

}
//创建并暴露store
export default new Vuex.Store({
  actions,
  mutations,
  state
})

1.安装插件并在main.js里面引用

 

 只有写了前面那些配置项,vue才会认识这个store的配置项，vm上才会有 

如果vue发现有不认识的配置项就会丢弃掉

发现组件和vm上都有了$store

 

2.创建store文件夹,里面建立index.js

 

 

 

 

 发现报错,是因为，store的创建位置不对

应该在在vue.user（vuex）之后创建store

 

 原因分析

当这边引用我们在store里面index.js里面写的,第十行引入时,就把store的index.js里面的代码执行完毕了

也就是说此时都已经创建store

然后再回到main.js里面创建vue 即连vue实例都没有创建那store怎么放到vm上面 

但是如果想当然就把 引用和使用的位置换一下.一样报错

发现换了下位置跟前面报错一模一样

 

其实这是vue解析import的一个问题

这边正常引用

 

输出

 

 

把它顺序改变下

 

发现还是import优先调用

也就是对于vue cli来说,它会优先扫描import的内容对import进行顺序执行

解决方法,把这边的vue.use(Vuex)写到 store文件夹的index.js文件夹上方,在创建store前

store/index.js

 

str/main.js

 

然后我们观察$sore上面的值

有我们最想看到的dipatch和commit