Vue 搭建Vuex环境详解
短信预约 -IT技能 免费直播动态提醒
搭建Vuex环境
在class="lazy" data-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')
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注编程网的更多内容!
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
