Vuex状态管理详解-优快云博客

本文链接：https://blog.youkuaiyun.com/zimingyo/article/details/127061451

本文详细介绍了Vue插件Vuex的使用方法，包括其概念、适用场景、项目搭建步骤及具体应用实例。Vuex用于Vue项目的集中式状态管理，特别适合于多个组件间的数据共享。

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

概念：专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个数组的共享状态进行集中式管理（读/写），这也是一种组件间通信的方式，且适用于任意组件间通信。
使用场景：

多个组件依赖同一个状态
来自不同组件的行为需要变更同一状态

vuex项目建立步骤

引入npm i vuex@3

注意：
使用vue2的脚手架，则安装vuex3
使用vue3的脚手架，则安装vuex4

在App.vue中引入

import store from './store/index'

store(用于创建Vuex中最为核心的store)

新建文件夹store,与components同一级
在store文件夹下新建index.js文件

index.js文件

import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)

const actions={}  //用于响应组件中的动作
const mutations={}   //用于操作数据
const state={}     //用于存储数据

//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state
})

在App.vue文件(引入store)

<template></template>
<script>
  ......
  new Vue({
		......
		store
		......
	})
  ......
</script>

步骤顺序：1，3，24

具体使用：
P.vue文件

<template></template>
<script>
    export default {
       data(){
           return {
             n:1
          }
       },
       methods:{
           add(){
            this.$store.dispatch('jia',this.n)
        }
     }
}
</script>

store index.js文件

......
const actions={
    jia(context,value){
         context.commit('JIA',value)
    }
}

const mutations={
  JIA(state,value){
        state.sum+=value
    }
}

const state={
sum=0
}
......

组件中读取vuex中的数据：$store.state.sum
组件中修改vuex中的数据：$store.dispatch('actions中的方法名',数据)或$store.commit('mutations中的方法名',数据)
若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写diapatch,直接编写commit

具体例子
项目结构
在这里插入图片描述
index.js文件

import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)

const actions={}
const mutations={
    Add(state,value){
       state.personlist.unshift(value)
       
    //    console.log(value.pname);
    //    console.log(value.id);
    }
}
const state={
    personlist:[]
}
export default new Vuex.Store({
    actions,
    mutations,
    state
})

App.vue文件

<template>
    <div>
        <Person></Person>
    </div>
</template>

<script>
import Person from './components/Person.vue'
export default ({
    name:'App',
    components:{
        Person
    }
    
})
</script>

main.js文件（引入store）

import Vue from 'vue'
import App from './App.vue'
import store from './store/index'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  store
}).$mount('#app')

Person.vue文件

<template>
    <div>
        <input type="text" placeholder="请输入要添加的姓名" v-model="name">
        <button @click="add()">添加</button>
        <ul>
			<li v-for="p in personList" :key="p.id">{{p.name}}</li>
		</ul>
    </div>    
</template>

<script>
  // import {mapMutations,mapState} from 'vuex'

   import {nanoid} from 'nanoid'
    export default{
        
        name:'School',
        data(){
            return{
                name:'',
                // person:{
                //     id:nanoid(),
                //     pname:''              
                // }
            }
        },
        methods:{
          add(){
            const person = {id:nanoid(),name:this.name}
            this.$store.commit("Add",person)
            this.name=""
          }
            // ...mapMutations({add:'Add'}),
            
        },
        computed:{
            personList(){
                return this.$store.state.personlist
            } 
        //    ...mapState({personList:'personlist'})
        }
        
        
       

    }
</script>