先直接贴上注入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要是小写
Logo

前往低代码交流专区

更多推荐