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项目引入Iconfont图标库的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-10-10
这篇文章主要给大家介绍了vue中proto文件函数调用的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下2021-08-08
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
这篇文章主要介绍了使用vue-cli3 创建vue项目，并配置VS Code 自动代码格式化 vue语法高亮问题，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
在Web开发中,使用Vue.js框架可以通过ref属性、v-model指令和计算属性等特性实现元素高度的动态调整,文章详细介绍了如何利用Vue的功能根据多选框的选择数量动态改变元素的高度,并通过多个示例展示其应用2024-09-09
这篇文章主要介绍了vite+vue3中使用mock模拟数据问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要为大家详细介绍了基于vue使用canvas实现移动端手写签名，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
在vue2项目中，组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的情况下（后台获取数据存入vuex，组件之间共享数据），那么就需要用vuex来管理这些。2017-05-05
vue.js动态设置VueComponent高度遇到的问题及解决
这篇文章主要介绍了vue.js动态设置VueComponent高度遇到的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
Vue+Node实现商品列表的分页、排序、筛选，添加购物车功能详解
这篇文章主要介绍了Vue+Node实现商品列表的分页、排序、筛选，添加购物车功能,结合实例形式分析了vue.js前台商品分页、排序、筛选等功能及后台node.js处理技巧,需要的朋友可以参考下2019-12-12
这篇文章主要介绍了vue中使用hover选择器无效的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
最新评论