总结:
//引入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