第四话：vue状态管理vuex的安装以及使用！！！_通过npm包管理工具,安装vuex依赖包的命令是-CSDN博客

本文详细介绍如何在Vue.js项目中使用Vuex进行状态管理，包括安装、配置及在组件中使用Vuex的方法，实现全局状态的统一管理和响应式更新。

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

问题描述：开发项目的过程中想拿到一个变量，想让其不用一级一级作为参数传递，而是在使用时拿取，改变之后全局都发生改变。

vuex官网解释：vuex是一个专为vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有的状态，并以相应的规则保证状态以一种可预测的方式发生变化。(vuex是一个专门为vue.js设计的集中式状态管理架构，用来管理公用属性，真的是好用太多了)

开始发车：

1. 利用npm包管理工具，安装vuex（前提：利用vue-cli构建好项目，不会的参考：https://blog.csdn.net/priest_wt/article/details/81237437）
命令：npm install vuex (--save)
--save参数的作用是在我们的包配置文件package.json文件中添加对应的配置

"dependencies": {
    "axios": "^0.18.0",
    "element-ui": "^2.4.5",
    "qs": "^6.5.2",
    "save": "^2.3.2",
    "vue": "^2.5.17",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },

2. 开始使用vuex
官网描述：每一个 Vuex 应用的核心就是 store（仓库）。"store"基本上就是一个容器，它包含着你的应用中大部分的状态(state)。Vuex 和单纯的全局对象有以下两点不同：

Vuex 的状态存储是响应式的。当 Vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会相应地得到高效更新。
你不能直接改变 store中的状态。改变store中的状态的唯一途径就是显式地提交(commit)mutations。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

3.在项目中注册并调用vuex:

我们在项目中的src目录下，创建store.js文件，store.js内添加以下代码：

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

Vue.use(Vuex)

export default new Vuex.Store({
	state: {
		userType: '管理员',
		count: 0
	},
	getter: {
		
	},
	mutations: { //逻辑处理，但mutation必须是同步函数
		increment(state) {
			//变更状态
			state.count++
		},
		decrement(state){
			state.count--
		},
		setUserType(state,userType){
			//state.userType
			state.userType = userType;
		}
	},
	actions: { //action类似于mutation,action提交的是mutation,而非直接变更状态;Action 可以包含任意异步操作.
		setIncrement(context) {
			context.commit('increment');
		}
	}
})

解释代码：导入并注册一个vuex，再导出一个vuex实例，在这个实例中state定义了两个属性userType、count，然后再mutations中定义了三个方法，increment主要是对count自增计数，decrement是对count自减计数。setUserType主要是改变userType属性的值的。

4.在main.js中引入store.js:

import store from './store';

然后我们在main.js文件的vue实例中添加store属性，即可在全局的所有子组件中使用。

//这个为vue3的脚手架默认的
new Vue({
	el:'#app',
	router,
	store,
	render: h => h(App)
}).$mount('#app');

//vue2的脚手架
new Vue({
  el: '#app',
  store,
  router,
  template: '<App/>',
  components: { App }
})

5.在vuexTest组件中使用我们定义的store：

<template>
	<div id="vuexTest">
		<div>{{count}}</div>
		<button @click="increment">+</button>
		<button @click="decrement">-</button>
		<div>{{localCount}}</div>
		<button @click="goSearch">跳转第二个页面</button>
	</div>
</template>

<script>
	//import { mapState } from 'vuex'
	export default {
		name:'vuexTest',
		data:function() {
			return {
				localCount:'普通员工'
			}
		},
		methods:{
			increment:function(){
				this.$store.commit('increment');
			},
			decrement:function(){
				this.$store.commit('decrement');
			},
			goSearch:function(){
				this.userType=this.localCount;
				this.$router.push('/vuexTest1');
			}
		},
		computed:{
			count(){
				return this.$store.state.count;
			},
			userType:{
				get(){
					return this.$store.state.userType;
				},
				set(newVal){
					console.log(newVal);
					this.$store.commit('setUserType', newVal);
				}
			}
		},
		mounted(){
			console.log(this.count);
		},
	}
</script>

<style lang="less" scoped="scoped">
	#vuexTest{
		button{
			width: 130px;
			height: 30px;
			margin: 10px;
			text-align: center;
		}
	}
</style>

vuexTest1组件：

<template>
	<div id="vuexTest1">
		<div>{{count}}</div>
	</div>
</template>

<script>
	export default {
		name:'vuexTest1',
		data:function() {
			return {
			}
		},
		methods:{
		},
		computed:{
			count(){
				return this.$store.state.userType;
			},
		},
		mounted(){
			console.log(this.count);
		},
	}
</script>

<style lang="less" scoped="scoped">
	#vuexTest1{
		button{
			width: 30px;
			height: 30px;
			margin: 10px;
			text-align: center;
		}
	}
</style>

从vuexTest跳转到vuexTest1中查看效果：