Vue 搭建Vuex环境详解
更新时间：2021年11月15日 15:34:56 作者：TA_WORLD
这篇文章主要为大家介绍了Vue搭建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
// 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使用keep-alive实现组件切换时保存原组件数据方法
这篇文章主要介绍了vue使用keep-alive实现组件切换时保存原组件数据方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
今天小编就为大家分享一篇对vue 键盘回车事件的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
vue3集成Element-plus实现按需自动引入组件的方法总结
vue3出来一段时间了,element也更新了版本去兼容vue3,下面这篇文章主要给大家介绍了关于vue3集成Element-plus实现按需自动引入组件的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
这篇文章主要介绍了vscode自定义vue模板的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
vuex是一个专门为vue开发的状态管理工具,它采用集中式存储管理应用的所有组件的状态,其核心是state,下面这篇文章主要给大家介绍了关于Vuex的安装、搭建及案例的相关资料,需要的朋友可以参考下2022-05-05
基于Vue.js的文件选择与多选对话框组件Dccfile的使用教程
在现代前端开发中,Vue.js 提供了强大的组件化开发能力,使得我们可以轻松构建复杂且可复用的用户界面,本文将介绍一个基于 Vue.js 的文件选择与多选对话框组件——Dccfile,并详细解析其功能和实现细节2025-04-04
Vue CLI3中使用compass normalize的方法
这篇文章主要介绍了Vue CLI3中使用compass normalize的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
这篇文章主要给大家介绍了关于vue3中ref获取子组件值的相关资料,在Vue3中父组件获取子组件的值可以通过使用'ref'和'$refs'来实现,文中通过代码示例介绍的非常详细,需要的朋友可以参考下2023-08-08
这篇文章主要为大家详细介绍了Vue如何通过字符串关键字符实现动态渲染input输入框。文中的示例代码讲解详细，感兴趣的小伙伴可以了解一下2022-12-12
在本篇文章里小编给大家分享了关于VUE中使用MUI方法和步骤，有需要的朋友们可以学习参考下。2019-02-02
最新评论