vue2项目，vuex的安装与配置

最新推荐文章于 2024-11-27 20:46:45 发布

m0_67392661

最新推荐文章于 2024-11-27 20:46:45 发布

阅读量924

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/m0_67392661/article/details/123303713

本文介绍了Vuex在Vue2项目中的安装和配置过程。通过创建store目录、组织模块，以及在main.js中引入和在vue组件中使用Vuex。Vuex作为状态管理模式，用于集中管理应用的状态，并确保状态变化的可预测性。文章提供了具体的代码示例，帮助读者理解和应用Vuex。

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

一、介绍
官方解释：vuex是一个专为vue.js应用程序开发的 状态管理模式。它采用集中式存储管理应用的所有的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

我的理解：可以理解为是 全局变量

安装：

npm install vuex --save

接着在src下，新建一个store目录，store里再新建index.js和module目录，module目录里再存放你自己定义的模块（不懂没关系，博主下面会有代码让你复制粘贴）
我的目录:
在这里插入图片描述

store/index.js文件：

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

import specimen from "./modules/specimen.js"

Vue.use(Vuex)

const state = {}

const getters = {

}

const mutations = {
	
}

const actions = {
	
}

export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions,
  modules: {
    specimen  // specimen模块命名为specimen，要在specimen.js声明namespaced: true才有用
  }
})

store/modules/specimen.js文件：

/**
 * 获取参数：this.$store.state.specimen.num
 * 
 * 调用方法：

最低0.47元/天解锁文章

200万优质内容无限畅学