Vux的说明

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

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

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

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

vuex项目建立步骤

  1. 引入npm i vuex@3

注意:
使用vue2的脚手架,则安装vuex3
使用vue3的脚手架,则安装vuex4

  1. 在App.vue中引入
import store from './store/index'
  1. 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
})
  1. 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>

效果图
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值