亲宝软件园·资讯

展开

Vue 搭建Vuex环境

TA_WORLD 人气:0

搭建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')

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注的更多内容!

加载全部内容

相关教程
猜你喜欢
用户评论