Vue 搭建Vuex环境详解

这篇文章主要为大家介绍了Vue搭建Vuex环境，具有一定的参考价值，感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

目录
搭建Vuex环境
总结

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

但是这样会出现报错：

[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

更多相关文章

随机推荐