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

总结

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

赞 (0)

相关推荐

  • Vue CLI 3搭建vue+vuex最全分析(推荐)

    一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue serve .vue ui 等命令) CLI 服务:@vue/cli-service是一个开发环境依赖.构建于 webpack和 webpack-dev-server之上(提供 如:serve.build 和 inspect 命令) CLI 插件:给Vue 项目提供可选功能的 npm 包 (如:

  • 使用vue3.x+vite+element-ui+vue-router+vuex+axios搭建项目

    使用vue3.x+vite+element-ui+vue-router+vuex+axios搭建项目

    目录 一. 参考文档 二. vite搭建项目 三. 配置element-ui 四. 配置vue-router 五. 配置vuex 安装 六. 配置axios 七. 总结 一. 参考文档 vite官方文档 vue3.x官方文档 vue-router4.x官方文档 vuex4.x官方文档 element-ui3.x官方文档 Ant Design Vue2.x官方文档 axios文档 二. vite搭建项目 安装 # npm 安装 npm init vite@latest # yarn 安装 yarn

  • 详解vue+vuex+koa2开发环境搭建及示例开发

    写在前面 这篇文章的主要目的是学会使用koa框架搭建web服务,从而提供一些后端接口,供前端调用. 搭建这个环境的目的是: 前端工程师在跟后台工程师商定了接口但还未联调之前,涉及到向后端请求数据的功能能够走前端工程师自己搭建的http路径,而不是直接在前端写几个死数据.即,模拟后端接口. 当然在这整个过程(搭建环境 + 开发示例demo)中,涉及到以下几点知识点. 包括: koa2的知识点 node的知识点 跨域问题 fetch的使用 axios的使用 promise的涉及 vuex -> st

  • mpvue+vuex搭建小程序详细教程(完整步骤)

    本文介绍了mpvue+vuex搭建小程序详细教程(完整步骤),分享给大家,具体如下: 源码 mpvue-vuex-demo 构成 1.采用mpvue 官方脚手架搭建项目底层结构 2.采用Fly.js 作为http请求库 3.引入mpvue-router-patach,以便在mpvue小程序中能使用vue-router的写法 目录结构 ├── src // 我们的项目的源码编写文件 │ ├── components // 组件目录 │ ├── common //静态资源 │ │ └── font

  • Vuex的基本概念、项目搭建以及入坑点

    前言:Vuex是一个专门为Vue.js应用程序开发的状态管理模式, 它采用集中式存储管理所有组件的公共状态, 并以相应的规则保证状态以一种可预测的方式发生变化. Vuex的四大核心 1.state 驱动应用的数据源 2.mutations 基因突变 类如C# 属性get set 3.actions 行为 4.getters 读取器 上图中绿色虚线包裹起来的部分就是Vuex的核心, state 中保存的就是公共状态, 改变 state 的唯一方式就是通过 mutations 进行更改. 可能你现在

  • 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 = {} // 创建sto

  • Linux搭建python环境详解

    一.下载文件 python官网:https://www.python.org/downloads/ 版本:python-2.7.3 下载地址:http://www.jb51.net/softs/2293.html setuptools官网:https://pypi.python.org/pypi/setuptools#downloads 版本:setuptools-0.6c11 pip官网:https://pypi.python.org/pypi/pip#downloads 版本:pip-1.5

  • 使用vue cli4.x搭建vue项目的过程详解

    cli-4.x已经发布好久了,斟酌了好久,还是决定将原来的cli-2.x升级到4.x,详细的升级过程可以戳这里 1.创建项目 vue create vuetest 2.选择配置方式 ? Please pick a preset: (Use arrow keys) ☜(使用箭头键) > default (babel, eslint) ☜(使用默认的配置,会安装babel和eslint) Manually select features ☜(手动配置) 这里我选择的是手动配置(使用↑ ↓箭头切换,E

  • Vuex的安装、搭建及案例详解

    Vuex的安装、搭建及案例详解

    目录 前言 Vuex原理讲解 1.安装vuex组件 2.使用Vuex 求和案例 Coute.vue store.js Actions Mutations getters的使用: store Store仓库数据的使用: 效果图 GetState 的引入 总结 前言 本文讲诉了Vuex的安装.搭建.以及Actions.Mutations.State.Getters的使用,为什么使用mapState.mapGetters以及一些细节的解释 Vuex原理讲解 Actions:词义是 动作行为 Mutat

  • Python3+Pycharm+PyQt5环境搭建步骤图文详解

    搭建环境: 操作系统:Win10 64bit Python版本:3.7 Pycharm:社区免费版 一.Python3.7安装 下载链接:官网https://www.python.org/downloads/windows/或腾讯软件中心下载https://pc.qq.com/detail/5/detail_24685.html或其他站点下载.我下载的是python-3.7.0-amd64. 下载到安装包后打开,如果想安装到默认路径(C盘)的话一直点下一步就可以了,或者自定义安装到其他分区,我的

  • Hadoop-3.1.2完全分布式环境搭建过程图文详解（Windows 10）

    一.前言 Hadoop原理架构本人就不在此赘述了,可以自行百度,本文仅介绍Hadoop-3.1.2完全分布式环境搭建(本人使用三个虚拟机搭建). 首先,步骤: ① 准备安装包和工具: hadoop-3.1.2.tar.gz ◦ jdk-8u221-linux-x64.tar.gz(Linux环境下的JDK) ◦ CertOS-7-x86_64-DVD-1810.iso(CentOS镜像) ◦工具:WinSCP(用于上传文件到虚拟机),SecureCRTP ortable(用于操作虚拟机,可复制粘

  • IDEA插件开发之环境搭建过程图文详解

    基于IntelliJ Platform Plugin搭建 环境步骤 File->New->Project 选择IntelliJ Platform Plugin 如果你这里没有SDK环境,则添加一个SDK环境,选择自己的idea的安装的根目录即可. 展示效果 基于Gradle搭建环境步骤 File->New->Project 选择Gradle next 进来以后大概是这样的一个界面,然后gradle会自动build项目,下载相关的依赖.(可能会失败) 遇到的问题一,依赖ideaIC-

  • Android开发环境搭建过程图文详解

    一.工具 IDE:Android Studio4.1+genymotion (Android studio 自带AVD着实有些不好用,这里选择使用genymotion模拟器) JDK:1.8 SDK:7.1 版本管理:Git 二.环境搭建 1.安装jdk 这里使用的是jdk1.8 ,安装并配置环境变量,通用步骤,不一 一介绍了 2.安装Android Studio 安装:android-studio-ide-201.6858069-windows.exe ,默认安装即可配置sdk (可以选择设置

  • GO语言开发环境搭建过程图文详解

    GO语言开发环境搭建过程图文详解

    一.GO语言开发包 1.什么是GO语言开发包 go 语言开发包其实是对go语言的一种实现,包括相应版本的语法, 编译, 运行, 垃圾回收等, 里面包含着开发 go 语言所需的标准库, 运行时以及其他的一些必要资源 2.GO语言开发包下载地址 Go官方下载地址 : https://golang.org/dl/ Go官方镜像站(上面打不开可使用这个) : https://golang.google.cn/dl/ Go语言中文网下载地址 : https://studygolang.com/dl gop

  • Docker Consul概述以及集群环境搭建步骤(图文详解)

    Docker Consul概述以及集群环境搭建步骤(图文详解)

    目录 一.Docker consul概述 二.基于 nginx 与 consul 构建自动发现即高可用的 Docker 服务架构 一.Docker consul概述 容器服务更新与发现:先发现再更新,发现的是后端节点上容器的变化(registrator),更新的是nginx配置文件(agent) registrator:是consul安插在docker容器里的眼线,用于监听监控节点上容器的变化(增加或减少,或者宕机),一旦有变化会把这些信息告诉并注册在consul server端(使用回调和协程

随机推荐