脚本宝典收集整理的这篇文章主要介绍了Vue 搭建Vuex环境详解,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
在src
目录下创建一个文件夹Store
,在store
文件夹内创建一个index.js
文件
index.js
用于创建Vuex中最核心的store
// scr/vuex/index.js // 引入Vuex import Vuex From 'vuex' // 用于响应组件中的动作 const actions = {} // 用于操作数据 const mutations = {} // 用于存储数据 const state = {} // 创建store const store = new Vuex.Store({ actions, mutations, state }) // 导出store export default store
// main.js import Vue from 'vue' import App from './App.vue' import Vuex from 'vuex' import store from './store/index' Vue.use(Vuex) new Vue({ render:h => h(App), store }).$mount('#app')
但是这样会出现报错:
[vuex] must call Vue.use(Vuex) before creating a store instance
意思为:[vuex] 在创建 store 实例之前必须调用 Vue.use(Vuex)
原因:在我们导入store的时候,先执行引入文件的代码,所以在执行以下代码时,引入的文件已经被执行了
既然这样子,那么我们交换import store from './store/index'
,Vue.use(Vuex)
两行代码
可是实际的结果是:[vuex] must call Vue.use(Vuex) before creating a store instance
,依旧报错
原因:这是脚手架解析import语句的问题,会将import引入的文件提前,放在代码的最开始,也是最开始解析,然后解析本文件的代码
正确的写法:
// scr/store/index.js // 引入Vuex和Vue import Vuex from 'vuex' import Vue from 'vue' // 应用Vuex插件 Vue.use(Vuex) // 用于响应组件中的动作 const actions = {} // 用于操作数据 const mutations = {} // 用于存储数据 const state = {} // 创建store const store = new Vuex.Store({ actions, mutations, state }) // 导出store export default store
// main.js import Vue from 'vue' import App from './App.vue' import store from './store/index' new Vue({ render:h => h(App), store }).$mount('#app')
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本宝典的更多内容!
以上是脚本宝典为你收集整理的Vue 搭建Vuex环境详解全部内容,希望文章能够帮你解决Vue 搭建Vuex环境详解所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。