Vue 搭建Vuex环境详解
作者:TA_WORLD 发布时间:2024-04-10 13:48:59
标签: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
// 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')
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注!
来源:https://blog.csdn.net/qq_56303170/article/details/121325907
0
投稿
猜你喜欢
- 实体有五种预定义的XML实体,HTML编码者应该熟悉。XML文档中的字符&、<、>、"和'被分别表示为
- 大家在使用ASP设计用户提交表单的时候,如果涉及到网址输入框,那么相信都有可能会用到这个效果,使用正则表达式验证网址合法性。代码如下:<
- Python编写类的时候,每个函数参数第一个参数都是self,一开始我不管它到底是干嘛的,只知道必须要写上。后来对Python渐渐熟悉了一点
- 写在前面Go语言在很多方面天然的具备很多便捷性,譬如网络编程,并发编程。而通道则又是Go语言实现并发编程的重要工具,因为其承担着通道之间互相
- 1、使用empty方法创建数组该方式可以创建一个空数组,dtype可以指定随机数的类型,否则随机采用一种类型生成随机数。import num
- 前言大家好,今天很开心有机会跟大家分享最近几年阿里在低代码领域的思考和实战。我是力皓,目前已经在前端和后端岗位工作了十多年了,近 3 年专注
- 1、说明写了python文件,想通过命令执行它,进入目录,并在命令执行中输入python文件名称。2、实例例如,桌子上有文件hello.py
- 本文实例讲述了php基于PDO实现功能强大的MYSQL封装类。分享给大家供大家参考,具体如下:class CPdo{ protected $
- 如何做一个文本书写器?我们有下面的的函数,可做“文本书写器”:<%function WriteToFile(FileName
- 1.什么是ORMORM 全拼Object-Relation Mapping.中文意为 对象-关系映射.在MVC/MVT设
- 一、启动/关闭MySQL (1)启动MySQL
- 1.通过pip安装python第三方模块paramikopip install paramiko2.创建脚本##导入paramiko、tim
- 作为微软推出的网页与数据库解决方案,ASP由于有微软得天独厚的操作系统等技术后盾支持,因此得到了迅速的发展,并且正受到越来越多的欢迎,在目前
- 使用了application及结合数据库来保存统计数据 <html><head><title>
- 今早开机发现,打开SQL Server 2008 的 SQL Server Management Studio,输入sa的密码发现,无法登陆
- 在实际的数据库应用中,我们经常遇到这样一个问题,连接到Oracle数据库的用户在作了一次操作后,再也没有后续操作,但却长时间没有和数据库断开
- PyQt5安装在cmd下输入pip install PyQt5完成PyQt5安装,再安装qt designer,可以使用pip安装pip i
- 呵呵,前面说拉那么半天废话,可能你已经看的不耐烦拉,好,这就说道正题,大家跟着我来一起把sa给大卸八块首先打开SQL中的企业管理器,接着在工
- Python版本 实现了比之前的xxftp更多更完善的功能 1、继续支持多用户 2、继续支持虚拟目录 3、增加支持用户根目录以及映射虚拟目录
- 本文记录了mysql 8.0.17 安装配置的图文教程,供大家参考,具体内容如下1.下载安装包下载地址:安装包2.解压安装包到目录这里解压到