Vue2安装Vuex

牧小七

已于 2023-06-08 17:17:09 修改

阅读量626

点赞数 2

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2023-05-21 16:11:38 首次发布

本文链接：https://blog.csdn.net/gc666888/article/details/130792521

版权

Vue 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

文章介绍了如何安装Vuex@3，并在项目中进行模块化使用。首先通过npm安装Vuex，然后在src/store目录下创建index.js文件，导入并应用Vuex，将countOptions和personOptions作为模块。同时，修改main.js文件，引入并使用store，关闭Vue的生产提示。

摘要由CSDN通过智能技术生成

安装vuex

npm install vuex@3

模块化使用

src文件夹下创建store文件夹

store文件夹下创建index.js文件

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
import countOptions from "@/store/count";
import personOptions from "@/store/person";
//应用Vuex插件
Vue.use(Vuex)

//创建并暴露store
export default new Vuex.Store({
    modules:{
        countAbout:countOptions,
        personAbout:personOptions
    }
})

修改main.js文件

在这里插入图片描述

/*
  该文件是整个项目的入口文件
*/
//引入Vue
import Vue from 'vue'
//引入App组件，它是所有组件的父组件
import App from './App.vue'
//引入插件
import vueResource from 'vue-resource'
//引入store
import store from './store'
//关闭vue的生产提示
Vue.config.productionTip = false
//使用插件
Vue.use(vueResource)

//创建Vue实例对象---vm
new Vue({
  //将App组件放入容器中
  render: h => h(App),
  store,
  beforeCreate() {
    Vue.prototype.$bus=this
  }
}).$mount('#app')