Vue2+Vue3基础入门到实战项目（六）——课程学习笔记

卡皮巴拉

已于 2023-09-06 09:09:22 修改

阅读量1.1k

点赞数 6

分类专栏： Vue学习文章标签：学习笔记前端 javascript vue.js

于 2023-09-06 09:03:04 首次发布

本文链接：https://blog.csdn.net/upgrade_bro/article/details/132592540

版权

本文介绍了在Vue2项目中如何使用Vuex进行状态管理，包括创建仓库、核心概念如state、mutations、actions以及模块化结构的应用。通过实例展示了如何在多组件间共享数据、提供和访问数据，以及遵循单向数据流的最佳实践。

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

镇贴！！！

day07

vuex的基本认知

使用场景

某个状态在很多个组件来使用 (个人信息)

多个组件共同维护一份数据 (购物车)

构建多组件共享的数据环境

1.创建项目

vue create vuex-demo

2.创建三个组件, 目录如下

|-components
|--Son1.vue
|--Son2.vue
|-App.vue

3.源代码如下

App.vue在入口组件中引入 Son1 和 Son2 这两个子组件

<template>
  <div id="app">
    <h1>根组件</h1>
    <input type="text">
    <Son1></Son1>
    <hr>
    <Son2></Son2>
  </div>
</template>

<script>
import Son1 from './components/Son1.vue'
import Son2 from './components/Son2.vue'

export default {
  name: 'app',
  data: function () {
    return {

    }
  },
  components: {
    Son1,
    Son2
  }
}
</script>

<style>
#app {
  width: 600px;
  margin: 20px auto;
  border: 3px solid #ccc;
  border-radius: 3px;
  padding: 10px;
}
</style>

main.js

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

Vue.config.productionTip = false

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

Son1.vue

<template>
  <div class="box">
    <h2>Son1 子组件</h2>
    从vuex中获取的值: <label></label>
    <br>
    <button>值 + 1</button>
  </div>
</template>

<script>
export default {
  name: 'Son1Com'
}
</script>

<style lang="css" scoped>
.box{
  border: 3px solid #ccc;
  width: 400px;
  padding: 10px;
  margin: 20px;
}
h2 {
  margin-top: 10px;
}
</style>

Son2.vue

<template>
  <div class="box">
    <h2>Son2 子组件</h2>
    从vuex中获取的值:<label></label>
    <br />
    <button>值 - 1</button>
  </div>
</template>

<script>
export default {
  name: 'Son2Com'
}
</script>

<style lang="css" scoped>
.box {
  border: 3px solid #ccc;
  width: 400px;
  padding: 10px;
  margin: 20px;
}
h2 {
  margin-top: 10px;
}
</style>