vuex踩坑记-注入store过程中vue文件报错store is not define,state is not define..各种undefine

本文详细介绍了如何在Vue项目中正确使用Vuex进行状态管理,包括如何在store.js中定义状态、在main.js中引入并配置store以及在.vue文件中访问store。同时,文章还分享了一个常见错误案例,即在导入Vue和Vuex时由于大小写错误导致store无法正常工作的问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

先直接贴上注入store的正确操作

一、引入store到vue组件中

(1)store.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);
const state={
  isCollapse:false
}

export default new Vuex.Store({
  state
});

(2)main.js

import Vue from 'vue';
import App from './App';
import router from './router';
import store from '@/vuex/store';
/* eslint-disable no-new */
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app');

(3).vue

<template>
<div>test if store exits</div>
</template>
<script>
export default{
mounted(){
console.log("test store",this.$store);
}
}
</script>

小心,此处有坑,掉坑如下。。。在导入vue跟vuex时候,英文差把大小写写错,把v小写写成了大写(正因为如此store注入不到vue中,vue文件理所当然拿取不到),结果前方一大堆bug找你,不是store is not define 就是state is not define....三姑六婆都找你...更无语的是,在js文件里打出store是一个不报错对象,在vue文件里就成了undefine....此处有坑,前车之鉴,望友勿掉坑...

import Vue from 'vue';
import Vuex from 'Vuex';//!!!v要是小写
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值