Vuex基础知识-state及mutation

最新推荐文章于 2024-01-19 21:06:41 发布

老李头的代码生活

最新推荐文章于 2024-01-19 21:06:41 发布

阅读量1k

点赞数 1

分类专栏： vuex 文章标签： html css html5

本文链接：https://blog.youkuaiyun.com/laoli360/article/details/120687245

版权

本文介绍了Vuex的基础知识，包括如何创建和使用state以及mutations进行同步数据修改。Vuex作为全局状态管理工具，适用于跨组件通信。文中通过实例展示了在AddItem、SubItem和App.vue组件中如何直接或映射使用state，以及如何定义和运用mutations进行数据更新。

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

Vuex

vuex 状态管理模式 ---- 全局统一集中式管理全局变量.

使用场景跨组件通信

eventBus 也是可以做到的跨组件通信的但是不如vuex 方便.

像图片中如果是父子结构的组件调用内容可以用父子组件传值(之前写过文章不再赘述)

而如果是侄子和叔叔传值呢?

那么就用到vuex了

这五项需要先理解语义之后我们会讲

yarn add vuex

首先安装这个vuex包

然后

vue create vuex-demo

初始化脚手架

然后清空欢迎页面和logo 这些我就不具体描述了

|-components
|---AddItem.vue
|---SubItem.vue
|-App.vue

components 内创建 AddItem.vue 和 SubItem.vue

App.vue

<template>
  <div id="app">
    <h1>根组件</h1>
    <span>库存总数:</span>
    <input type="text">
    <div style="border:1px solid black; width: 300px;">
      <AddItem></AddItem>
    </div>
    <hr>
    <div style="border:1px solid black; width: 300px;">
      <SubItem></SubItem>
    </div>
  </div>
</template>

<script>
import AddItem from '@/components/AddItem'
import SubItem from '@/components/SubItem'
export default {
  components: {
    AddItem,
    SubItem
  }
}
</script>

<style>
#app {
  width: 300px;
  margin: 20px auto;
  border:1px solid #ccc;
  padding:4px;
}
</style>

AddItem.vue

<template>
  <div>
      <h3>AddItem组件

最低0.47元/天解锁文章