四、vue3学习笔记：状态管理vuex

柔光的暖阳◎ 2024-04-18 16:34 64阅读 0赞

## 一、store中定义的常量在页面中使用 ##

*  src/store/state.js

const state = { 
      appName: 'admin'
    }
    
    export default state

*  src/store/module/user.js

const state = { 
      userName: 'sun'
    }
    
    const mutations = { 
      //
    }
    
    const actions = { 
      //
    }
    
    export default { 
      state,
      mutations,
      actions
    }

*  src/views/store.vue

<template>
      <div>
        
        
        <a-input @input="handleInput"/>
        
        
        <a-show :content="inputValue"/>
        <p>{ { appName}}</p>
        <p>{ { userName}}</p>
      </div>
    </template>
    
    <script>
      // 引入组件
      import AInput from '_c/AInput.vue'
      import AShow from '_c/AShow.vue'
    
      export default { 
        name: "store",
        data() { 
          return { 
            inputValue: ''
          }
        },
        // 使用计算属性获得appName
        computed: { 
          // 使用$store来访问,获取store文件夹根目录下的文件中的常量
          appName () { 
            return this.$store.state.appName
          },
          // 获取store文件夹非根目录下的文件中的常量
          userName () { 
            return this.$store.state.user.userName
          }
        },
        // 将组件注册
        components: { 
          AInput,
          AShow
        },
        methods: { 
          handleInput (value) { 
            this.inputValue = value
          }
        }
      }
    </script>
    
    <style scoped>
    
    </style>

发表评论取消回复

表情：

评论列表（有 0 条评论，64人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue状态管理vuex

方网站：https://vuex.vuejs.org/zh/ 项目中安装vuex npm install vuex -S 在项目的src目录下新建一个目录s...

我会带着你远行/ 2024年04月20日 08:34/ 0 赞/ 67 阅读

相关四、vue3学习笔记：状态管理vuex

一、store中定义的常量在页面中使用 * src/store/state.js const state = { appName: 'ad...

柔光的暖阳◎/ 2024年04月18日 16:34/ 0 赞/ 65 阅读

相关 vue学习经验总结（vuex状态管理）

1.在vuex里面写入 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)

冷不防/ 2022年12月07日 04:27/ 0 赞/ 227 阅读

相关 Vuex状态管理（四）

Vuex详解认识Vuex Vuex是做什么的？官方解释：Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集

朴灿烈づ我的快乐病毒、/ 2022年11月19日 11:28/ 0 赞/ 218 阅读

相关 Vuex状态管理（四）

Vuex详解认识Vuex Vuex是做什么的？官方解释：Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集

悠悠/ 2022年11月19日 11:27/ 0 赞/ 256 阅读

相关 Vue 状态管理与Vuex

Vuex 是什么？ > Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式

Dear 丶/ 2022年11月03日 04:08/ 0 赞/ 220 阅读

相关 Vue状态管理——Vuex

文章目录 1、序言 2、安装Vuex 3、基本用法 3.1 mutation 3.1.1 提交载荷（Payload）

男娘i/ 2022年08月31日 15:17/ 0 赞/ 311 阅读

相关 Vue 状态管理架构 VueX

VueX 详细介绍 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

超、凢脫俗/ 2022年05月18日 06:09/ 0 赞/ 263 阅读

相关 Vue学习之vuex（vue状态管理）

如果学过vue.js的话，大家一定知道在vue中各个组件之间传值的痛苦，在vue中我们可以使用vuex来保存我们需要管理的状态值，值一旦被修改，所有引用该值的地方就会自动更新，

电玩女神/ 2021年10月24日 00:31/ 0 赞/ 397 阅读

相关【Vue】学习笔记十：Vuex——状态管理工具

文章目录 Vuex 状态管理是什么？管理什么状态先看一看定义的vuex基本结构

比眉伴天荒/ 2021年09月21日 02:44/ 0 赞/ 337 阅读