Vuex全局状态

最新推荐文章于 2024-07-04 22:45:24 发布

知一zz

最新推荐文章于 2024-07-04 22:45:24 发布

阅读量397

点赞数

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

本文链接：https://blog.csdn.net/2201_75625882/article/details/130951558

版权

本文介绍了Vuex作为全局状态管理模式的基本概念、安装配置、数据修改、getters使用、mapState、mapGetters和mapActions助手函数的运用，以及如何进行模块化全局状态管理。在Vue项目中，可以通过$store.state访问全局变量，并使用dispatch触发actions和mutations来更新数据。

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

文章目录

一、什么是vuex？

vuex是全局状态管理模式

在这里插入图流程图片描述

二、vuex的使用

1、终端安装: vuex:cnpm i vuex -D 安装最新版的vuex，安装完vuex需要配置vuex并注入倒vue实例中

2、建一个store的文件夹，建一个store.js的文件，引入创建store方法

import {
    createStore } from 'vuex'

3、创建“仓库”

export default createStore({
   
    state() {
    // 创建全局state,类似组件的data()方法
        return {
   
            count: 0,
            name:"store test"
        }
    },
            // payload是commit触发mutations传递的第二个参数
    mutations: {
    // 类似组件的methods,属性值都是方法，主要是修改state
        add(state,payload) {
    // mutations的里面有默认的参数，参数值是state()方法返回的对象
            console.log(payload);//  payload是commit触发mutations传递的第二个参数
            this.state.count+=payload.number
        }
    },
    actions: {
    // actions是触发mutations的方法
        addAction(store,payload) {
    // "store"是Vuex中的一个方法，用于修改store状态中的数据
            store.commit("add",payload) // payload是传递来的值，相当于自定义修改
        }
    }
})

4、main.js

import store from "./store"
createApp(App)
.use(store) // 把创建的全局变量注入倒vue实例，vue实例就有了$store的对象，可以操控全局store
.mount('#app')

5、home.vue

其他子组件获取全局变量的方法：$store.state，后面跟一个全局变量

例：

{ { $store.state.count }}

<script >
export default {
   
        mounted(){
   
            console.log(this.$store);
        }
    }
</script>

<template>
    <div class="box">
        <h1>home page</h1>
        <p>{
   {
    $store.state.count }}</p>
    </div>
</template>

<style scoped>
    .box{
   
        border: 1px solid gray;
        min-height: 100px;
    }
</style>

三、怎么修改数据？

dispatch方法可以触发一个actions,在通过actions触发mutations

list.vue

dispatch( ),第一个参数是actions里的函数名，第二个是可选参数，是传递的值，可以传递任意类型

<script >
export default {
   
    methods: {
   
        dispatchAdd() {
   
          // addAction是actions内的一个方法，利用组件触发actions
            this.$store.dispatch("addAction",{