Vue2基础十、Vuex

news2024/11/16 18:09:20

零、文章目录

Vue2基础十、Vuex

1、vuex概述

（1）vuex是什么

  • vuex 是一个 vue 的 状态管理工具，状态就是数据。
  • 大白话：vuex 是一个插件，可以帮我们管理 vue 通用的数据 (多组件共享的数据) 例如：购物车数据 个人信息数据

（2）场景

  • ① 某个状态 在 很多个组件 来使用 (个人信息)
  • ② 多个组件 共同维护 一份数据 (购物车)

image-20230724221016553

（3）优势

  • ① 共同维护一份数据，数据集中化管理
  • ② 响应式变化
  • ③ 操作简洁 (vuex提供了一些辅助函数)

（4）注意点

  • 不是所有的场景都适用于vuex，只有在必要的时候才使用vuex
  • 使用了vuex之后，会附加更多的框架中的概念进来，增加了项目的复杂度 （数据的操作更便捷，数据的流动更清晰）

2、构建 vuex环境

  • 目标：基于脚手架创建项目，构建 vuex 多组件数据共享环境

image-20230724221843685

  • 效果是三个组件, 共享一份数据:
    • 任意一个组件都可以修改数据
    • 三个组件的数据是同步的

（1）创建项目

vue create vuex-demo

（2）创建组件目录如下

|-components
|--Son1.vue
|--Son2.vue
|-App.vue
  • 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')
  • components/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>
  • components/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>

（3）创建Vuex数据仓库

image-20230725211223321

  1. **安装 vuex：**安装vuex与vue-router类似，vuex是一个独立存在的插件，如果脚手架初始化没有选 vuex，就需要额外安装。
yarn add vuex@3 或者 npm i vuex@3
  1. **新建 store/index.js 专门存放 vuex：**为了维护项目目录的整洁，在src目录下新建一个store目录其下放置一个index.js文件。 (和 router/index.js 类似)

image-20230725211435982

  1. **Vue.use(Vuex)创建仓库 new Vuex.Store()：**在store/index.js中，使用Vuex
// 导入 vue
import Vue from 'vue'
// 导入 vuex
import Vuex from 'vuex'
// vuex也是vue的插件, 需要use一下, 进行插件的安装初始化
Vue.use(Vuex)

// 创建仓库 store
const store = new Vuex.Store()

// 导出仓库
export default store
  1. 在 main.js 中导入挂载到 Vue 实例上
import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  store
}).$mount('#app')
  • 至此，就成功创建了一个 空仓库!!
  1. 测试打印Vuex：在App.vue打印Vuex
created(){
  console.log(this.$store)
}

3、核心概念-state状态

  • 状态，即数据，明确如何给仓库 提供 数据，如何 使用 仓库的数据

（1）提供数据

  • State 提供唯一的公共数据源，所有共享的数据都要统一放到 Store 中的 State 中存储。
  • 打开项目中的store.js文件，在state对象中可以添加我们要共享的数据。
// 创建仓库 store
const store = new Vuex.Store({
  // state 状态, 即数据, 类似于vue组件中的data,
  // 区别：
  // 1.data 是组件自己的数据, 
  // 2.state 中的数据整个vue项目的组件都能访问到
  state: {
    count: 101
  }
})

（2）使用数据-通过store直接访问

获取 store：
 1.Vue模板中获取 this.$store
 2.js文件中获取 import 导入 store


模板中：     {{ $store.state.xxx }}
组件逻辑中：  this.$store.state.xxx
JS模块中：   store.state.xxx
  • 模板中使用：组件中可以使用 $store 获取到vuex中的store对象实例，可通过state属性获取count， 如下
<h1>state的数据 - {{ $store.state.count }}</h1>
  • **组件逻辑中使用：**将state属性定义在计算属性中 https://vuex.vuejs.org/zh/guide/state.html
<h1>state的数据 - {{ count }}</h1>

// 把state中数据，定义在组件内的计算属性中
  computed: {
    count () {
      return this.$store.state.count
    }
  }
  • js文件中使用
//main.js

import store from "@/store"

console.log(store.state.count)

（3）使用数据-辅助函数mapState

  • 每次一个个的提供计算属性太麻烦了，我们可以通过mapState辅助函数把 store中的数据 自动 映射到 组件的计算属性中

image-20230726102146723

import { mapState } from 'vuex'

computed: {
    ...mapState(['count'])
}
  • 上面代码等价于
count () {
    return this.$store.state.count
}
  • 直接在代码中调用即可
 <div> state的数据：{{ count }}</div>

4、核心概念-mutations

（1）单向数据流

  • vuex 同样遵循单向数据流，组件中不能直接修改仓库的数据

image-20230726103718639

  • Son1.vue：this.$store.state.count++ (错误写法)，但是vue默认不会监测，监测需要成本
<button @click="handleAdd">值 + 1</button>


methods:{
	 handleAdd (n) {
      // 错误代码(vue默认不会监测，监测需要成本)
       this.$store.state.count++
      // console.log(this.$store.state.count) 
    },
}

（2）开启严格模式

  • 通过 strict: true 可以开启严格模式，开启严格模式后，直接修改state中的值会报错
  • state数据的修改只能通过mutations，并且mutations必须是同步的

image-20230726104855825

（3）mutations操作流程

  1. 定义 mutations 对象，对象中存放修改 state 的方法
const store = new Vuex.Store({
	state: {
		count: 0
	},
	// 定义mutations
	mutations: {
		// 第一个参数是当前store的state属性
		addCount (state) {
		state.count += 1
		}
	}
})
  1. 组件中提交调用 mutations
this.$store.commit('addCount')

（4）mutations带参数

  • 看下面这个案例，每次点击不同的按钮，加的值都不同，每次都要定义不同的mutations处理吗？

image-20230726105843162

  • 提交 mutation 是可以传递参数的 this.$store.commit( 'xxx', 参数 )

  • 带参数的mutations操作流程如下：

    • 提供带参数的mutation函数
    mutations: {
  ...
  addCount (state, count) {
    state.count = count
  }
},
    • 页面中提交调用 mutation
    handle ( ) {
  this.$store.commit('addCount', 10)
}
    • 提交的参数只能是一个, 如果有多个参数要传, 可以传递一个对象
    this.$store.commit('addCount', {
  count: 10,
  ...
})

（5）案例-减法功能

image-20230726110742233

  • Son2.vue
    <button @click="subCount(1)">值 - 1</button>
    <button @click="subCount(5)">值 - 5</button>
    <button @click="subCount(10)">值 - 10</button>

    export default {
        methods:{
             subCount (n) { 
                this.$store.commit('addCount', n)
        },
        }
    }
  • store/index.js
mutations:{
    subCount (state, n) {
      state.count -= n
    },
}

（6）案例-双向绑定

image-20230726110726139

image-20230726111833997

  • App.vue
<input :value="count" @input="handleInput" type="text">

export default {
  methods: {
    handleInput (e) {
      // 1. 实时获取输入框的值
      const num = +e.target.value
      // 2. 提交mutation，调用mutation函数
      this.$store.commit('changeCount', num)
    }
  }
}
  • store/index.js
mutations: { 
   changeCount (state, newCount) {
      state.count = newCount
   }
},

（7）辅助函数mapMutations

  • mapMutations把mutations中的方法映射到methods中
import  { mapMutations } from 'vuex'
methods: {
    ...mapMutations(['addCount'])
}
  • 上面代码等价于
methods: {
      // commit(方法名, 载荷参数)
      addCount () {
          this.$store.commit('addCount')
      }
 }
  • 通过this.addCount调用
<button @click="addCount">值+1</button>
  • 注意： Vuex中mutations中要求不能写异步代码，如果有异步的ajax请求，应该放置在actions中

5、核心概念-actions

（1）actions概念

  • state：存放数据
  • mutations：同步更新数据 (便于监测数据的变化，记录调试)
  • actions：异步操作

image-20230726135047678

（2）actions操作流程

  • 提供action 方法
actions: {
  setAsyncCount (context, num) {
    // 一秒后, 给一个数, 去修改 num
    setTimeout(() => {
      context.commit('changeCount', num)
    }, 1000)
  }
},
  • 页面中 dispatch 调用
this.$store.dispatch('setAsyncCount', 200)

（3）辅助函数mapActions

  • mapActions 是把位于 actions中的方法映射到组件methods中
import { mapActions } from 'vuex'
methods: {
   ...mapActions(['changeCountAction'])
}
  • 上面代码等价于
methods: {
  changeCountAction (n) {
    this.$store.dispatch('changeCountAction', n)
  },
}
  • 通过 this.方法就可以调用
<button @click="changeCountAction(200)">+异步</button>

6、核心概念-getters

（1）getters概念

  • 除了state之外，有时我们还需要从state中派生出一些状态，这些状态是依赖state的，此时会用到getters

（2）getters操作流程

  • 例如：state中定义了list，为 1-10 的数组，组件中，需要显示所有大于5的数据
state: {
    list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
}
  • 定义 getters
  getters: {
    // (1) getters函数的第一个参数是 state
    // (2) getters函数必须要有返回值
     filterList:  state =>  state.list.filter(item => item > 5)
  }
  • 通过 store 访问 getters
{{ $store.getters.filterList }}

（3）辅助函数mapGetters

  • mapActions 是把位于 getters中的属性映射到组件computed中
computed: {
    ...mapGetters(['filterList'])
}
  • 上面代码等价于
computed: {
    filterList(){
        return $store.getters.filterList;
    }    
}
  • 直接在代码中就可以使用
{{ filterList }}

7、核心概念-module（进阶）

（1）module概念

  • 由于 vuex 使用单一状态树，应用的所有状态会集中到一个比较大的对象。
  • 当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
  • 由此，又有了Vuex的模块化。

image-20230726150041126

（2）模块拆分

  • 定义两个模块 user 和 setting

  • modules/user.js：user中管理用户的信息状态 userInfo

const state = {
  userInfo: {
    name: 'zs',
    age: 18
  }
}

const mutations = {}

const actions = {}

const getters = {}

export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}
  • modules/setting.js：setting中管理项目应用的 主题色 theme，描述 desc
const state = {
  theme: 'dark'
  desc: '描述真呀真不错'
}

const mutations = {}

const actions = {}

const getters = {}

export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}
  • 在store/index.js文件中的modules配置项中，注册这两个模块
import user from './modules/user'
import setting from './modules/setting'

const store = new Vuex.Store({
    modules:{
        user,
        setting
    }
})

（3）使用模块state数据

  • 尽管已经分模块了，但其实子模块的状态，还是会挂到根级别的 state 中，属性名就是模块名

image-20230726150824586

  • 使用模块中的数据

    1. 通过模块名访问：$store.state.模块名.xxx

    2. 通过 mapState 映射：

      1. 默认根级别的映射：mapState([ 'xxx' ])

      2. 子模块的映射 ：mapState('模块名', ['xxx']) - 需要开启命名空间 namespaced:true（对应模块文件中开启）

      export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}

  • 代码演示

    • $store直接访问
    $store.state.user.userInfo.name
    • mapState辅助函数访问
    ...mapState('user', ['userInfo']),
...mapState('setting', ['theme', 'desc']),

（4）使用模块getters数据

  • 使用模块getters数据

    1. 通过模块名访问：$store.getters['模块名/xxx ']

    2. 通过 mapGetters 映射

      1. 默认根级别的映射：mapGetters([ 'xxx' ])
      2. 子模块的映射：mapGetters('模块名', ['xxx']) - 需要开启命名空间

  • 代码实现

    • 定义模块modules/user.js
    const getters = {
  // 分模块后，state指代子模块的state
  UpperCaseName (state) {
    return state.userInfo.name.toUpperCase()
  }
}
    • Son1.vue 通过模块名访问
    <div>{{ $store.getters['user/UpperCaseName'] }}</div>
    • Son2.vue 通过 mapGetters 映射
    computed:{
  ...mapGetters('user', ['UpperCaseName'])
}

（5）使用模块mutations方法

  • 注意：默认模块中的 mutation 和 actions 会被挂载到全局，需要开启命名空间，才会挂载到子模块。

  • 使用模块mutations方法

    1. 通过 store 调用：$store.commit('模块名/xxx ', 额外参数)

    2. 通过 mapMutations 映射

      1. 默认根级别的映射：mapMutations([ 'xxx' ])
      2. 子模块的映射：mapMutations('模块名', ['xxx']) - 需要开启命名空间

  • 代码实现

    • 定义模块modules/user.js
    const mutations = {
  setUser (state, newUserInfo) {
    state.userInfo = newUserInfo
  }
}
    • 定义模块modules/setting.js
    const mutations = {
  setTheme (state, newTheme) {
    state.theme = newTheme
  }
}
    • Son1.vue通过 store 调用
    <button @click="updateUser">更新个人信息</button> 
<button @click="updateTheme">更新主题色</button>

export default {
  methods: {
    updateUser () {
      // $store.commit('模块名/mutation名', 额外传参)
      this.$store.commit('user/setUser', {
        name: 'xiaowang',
        age: 25
      })
    }, 
    updateTheme () {
      this.$store.commit('setting/setTheme', 'pink')
    }
  }
}
    • Son2.vue通过 mapMutations 映射
    <button @click="setUser({ name: 'xiaoli', age: 80 })">更新个人信息</button>
<button @click="setTheme('skyblue')">更新主题</button>

methods:{
// 分模块的映射
...mapMutations('setting', ['setTheme']),
...mapMutations('user', ['setUser']),
}

（6）使用模块actions方法

  • 注意：默认模块中的 mutation 和 actions 会被挂载到全局，需要开启命名空间，才会挂载到子模块。

  • 使用模块actions方法

    1. 通过 store 调用：$store.dispatch('模块名/xxx ', 额外参数)
    2. 通过 mapActions 映射
      1. 默认根级别的映射：mapActions([ 'xxx' ])
      2. 子模块的映射：mapActions('模块名', ['xxx']) - 需要开启命名空间

  • 代码实现

    • modules/user.js
    const actions = {
  setUserSecond (context, newUserInfo) {
    // 将异步在action中进行封装
    setTimeout(() => {
      // 调用mutation   context上下文，默认提交的就是自己模块的action和mutation
      context.commit('setUser', newUserInfo)
    }, 1000)
  }
}
    • Son1.vue 通过 store 调用
    <button @click="updateUser2">一秒后更新信息</button>

methods:{
    updateUser2 () {
      // 调用action dispatch
      this.$store.dispatch('user/setUserSecond', {
        name: 'xiaohong',
        age: 28
      })
    },
}
    • Son2.vue通过 mapActions 映射
    <button @click="setUserSecond({ name: 'xiaoli', age: 80 })">一秒后更新信息</button>

methods:{
  ...mapActions('user', ['setUserSecond'])
}

image-20230726162640339

（7）小结

  • 直接使用

    • state --> $store.state.模块名.数据项名

    • getters --> $store.getters[‘模块名/属性名’]

    • mutations --> $store.commit(‘模块名/方法名’, 其他参数)

    • actions --> $store.dispatch(‘模块名/方法名’, 其他参数)

  • 借助辅助方法使用

    • import { mapXxxx, mapXxx } from ‘vuex’

    • …mapState、…mapGetters放computed中；

    • …mapMutations、…mapActions放methods中；

    • …mapXxxx(‘模块名’, [‘数据项|方法’])

    • …mapXxxx(‘模块名’, { 新的名字: 原来的名字 })

8、综合案例-购物车

（1）功能模块分析

  • ① 请求动态渲染购物车，数据存 vuex
  • ② 数字框控件 修改数据
  • ③ 动态计算 总价和总数量

image-20230726163241071

（2）脚手架新建项目

image-20230727112441225

  • 注意：勾选vuex
vue create vue-cart-demo
  • App.vue
<template>
  <div class="app-container">
    <!-- Header 区域 -->
    <cart-header></cart-header>

    <!-- 商品 Item 项组件 -->
    <cart-item></cart-item>
    <cart-item></cart-item>
    <cart-item></cart-item>

    <!-- Foote 区域 -->
    <cart-footer></cart-footer>
  </div>
</template>

<script>
import CartHeader from '@/components/cart-header.vue'
import CartFooter from '@/components/cart-footer.vue'
import CartItem from '@/components/cart-item.vue'

export default {
  name: 'App',
  components: {
    CartHeader,
    CartFooter,
    CartItem
  }
}
</script>

<style lang="less" scoped>
.app-container {
  padding: 50px 0;
  font-size: 14px;
}
</style>
  • main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')
  • store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})
  • components/cart-header.vue
<template>
  <div class="header-container">购物车案例</div>
</template>

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

<style lang="less" scoped>
.header-container {
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  background-color: #42b983;
  text-align: center;
  color: white;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}
</style>
  • components/cart-footer.vue
<template>
  <div class="footer-container">
    <!-- 中间的合计 -->
    <div>
      <span>共 xxx 件商品，合计：</span>
      <span class="price">￥xxx</span>
    </div>
    <!-- 右侧结算按钮 -->
    <button class="btn btn-success btn-settle">结算</button>
  </div>
</template>

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

<style lang="less" scoped>
.footer-container {
  background-color: white;
  height: 50px;
  border-top: 1px solid #f8f8f8;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 10px;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}

.price {
  color: red;
  font-size: 13px;
  font-weight: bold;
  margin-right: 10px;
}

.btn-settle {
  height: 30px;
  min-width: 80px;
  margin-right: 20px;
  border-radius: 20px;
  background: #42b983;
  border: none;
  color: white;
}
</style>
  • components/cart-item.vue
<template>
  <div class="goods-container">
    <!-- 左侧图片区域 -->
    <div class="left">
      <img src="https://bluecusliyoupicrep.oss-cn-hangzhou.aliyuncs.com/202307271039546.png" class="avatar" alt="">
    </div>
    <!-- 右侧商品区域 -->
    <div class="right">
      <!-- 标题 -->
      <div class="title">低帮城市休闲户外鞋天然牛皮COOLMAX纤维</div>
      <div class="info">
        <!-- 单价 -->
        <span class="price">￥128</span>
        <div class="btns">
          <!-- 按钮区域 -->
          <button class="btn btn-light">-</button>
          <span class="count">1</span>
          <button class="btn btn-light">+</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CartItem',
  methods: {

  }
}
</script>

<style lang="less" scoped>
.goods-container {
  display: flex;
  padding: 10px;
  + .goods-container {
    border-top: 1px solid #f8f8f8;
  }
  .left {
    .avatar {
      width: 100px;
      height: 100px;
    }
    margin-right: 10px;
  }
  .right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    .title {
      font-weight: bold;
    }
    .info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .price {
        color: red;
        font-weight: bold;
      }
      .btns {
        .count {
          display: inline-block;
          width: 30px;
          text-align: center;
        }
      }
    }
  }
}

.custom-control-label::before,
.custom-control-label::after {
  top: 3.6rem;
}
</style>

（3）构建 cart 购物车模块

  • 新建 store/modules/cart.js
export default {
  namespaced: true,
  state () {
    return {
      list: []
    }
  },
}
  • 挂载到 vuex 仓库上 store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import cart from './modules/cart'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    cart
  }
})

export default store

（4）准备后端接口服务

  1. 安装全局工具 json-server （全局工具仅需要安装一次），官网地址：https://www.npmjs.com/package/json-server
npm i json-server  -g
  1. 代码根目录新建一个 db 目录
  2. 在db目录创建文件index.json
{
    "cart": [{
            "id": 100001,
            "name": "低帮城市休闲户外鞋天然牛皮COOLMAX纤维",
            "price": 128,
            "count": 5,
            "thumb": "https://bluecusliyoupicrep.oss-cn-hangzhou.aliyuncs.com/202307271039546.png"
        },
        {
            "id": 100002,
            "name": "网易味央黑猪猪肘330g*1袋",
            "price": 39,
            "count": 10,
            "thumb": "https://bluecusliyoupicrep.oss-cn-hangzhou.aliyuncs.com/202307271039546.png"
        },
        {
            "id": 100003,
            "name": "KENROLL男女简洁多彩一片式室外拖",
            "price": 128,
            "count": 3,
            "thumb": "https://bluecusliyoupicrep.oss-cn-hangzhou.aliyuncs.com/202307271039546.png"
        },
        {
            "id": 100004,
            "name": "云音乐定制IN系列intar民谣木吉他",
            "price": 589,
            "count": 1,
            "thumb": "https://bluecusliyoupicrep.oss-cn-hangzhou.aliyuncs.com/202307271039546.png"
        }
    ],
    "friends": [{
            "id": 1,
            "name": "zs",
            "age": 18
        },
        {
            "id": 2,
            "name": "ls",
            "age": 19
        },
        {
            "id": 3,
            "name": "ww",
            "age": 20
        }
    ]
}
  1. 进入 db 目录，执行命令，启动后端接口服务 (使用–watch 参数 可以实时监听 json 文件的修改)
json-server  --watch  index.json
  1. 访问接口测试 http://localhost:3000/cart

（5）请求动态渲染数据

image-20230727112539198

image-20230727105134836

  1. 安装 axios
yarn add axios
  1. 准备actions 和 mutations（store/modules/cart.js）
import axios from 'axios'

export default {
  namespaced: true,
  state () {
    return {
      list: []
    }
  },
  mutations: {
    updateList (state, payload) {
      state.list = payload
    }
  },
  actions: {
    async getList (ctx) {
      const res = await axios.get('http://localhost:3000/cart')
      ctx.commit('updateList', res.data)
    }
  }
}
  1. 调用 action, 获取数据（App.vue）
import { mapState } from 'vuex'

export default {
  name: 'App',
  components: {
    CartHeader,
    CartFooter,
    CartItem
  },
  created () {
    this.$store.dispatch('cart/getList')
  },
  computed: {
    ...mapState('cart', ['list'])
  }
}
  1. 动态渲染（App.vue）
<!-- 商品 Item 项组件 -->
<cart-item v-for="item in list" :key="item.id" :item="item"></cart-item>
  • components/cart-item.vue
<template>
  <div class="goods-container">
    <!-- 左侧图片区域 -->
    <div class="left">
      <img :src="item.thumb" class="avatar" alt="">
    </div>
    <!-- 右侧商品区域 -->
    <div class="right">
      <!-- 标题 -->
      <div class="title">{{item.name}}</div>
      <div class="info">
        <!-- 单价 -->
        <span class="price">￥{{item.price}}</span>
        <div class="btns">
          <!-- 按钮区域 -->
          <button class="btn btn-light">-</button>
          <span class="count">{{item.count}}</span>
          <button class="btn btn-light">+</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CartItem',
  props: {
    item: Object
  },
  methods: {

  }
}
</script>

（6）修改数量

image-20230727112559032

image-20230727133020899

  1. 注册点击事件（components/cart-item.vue）
<!-- 按钮区域 -->
<button class="btn btn-light" @click="onBtnClick(-1)">-</button>
<span class="count">{{item.count}}</span>
<button class="btn btn-light" @click="onBtnClick(1)">+</button>
  1. 页面中dispatch action（components/cart-item.vue）
onBtnClick (step) {
  const newCount = this.item.count + step
  if (newCount < 1) return

  // 发送修改数量请求
  this.$store.dispatch('cart/updateCount', {
    id: this.item.id,
    count: newCount
  })
}
  1. 提供action函数（store/modules/cart.js）
async updateCount (ctx, payload) {
  await axios.patch('http://localhost:3000/cart/' + payload.id, {
    count: payload.count
  })
  ctx.commit('updateCount', payload)
}
  1. 提供mutation函数（store/modules/cart.js）
mutations: {
  ...,
  updateCount (state, payload) {
    const goods = state.list.find((item) => item.id === payload.id)
    goods.count = payload.count
  }
},

（7）底部总价展示

image-20230727145537931

  1. 提供 getters（store/modules/cart.js）
getters: {
  total(state) {
    return state.list.reduce((p, c) => p + c.count, 0);
  },
  totalPrice (state) {
    return state.list.reduce((p, c) => p + c.count * c.price, 0);
  },
},
  1. 动态渲染（components/cart-footer.vue）
<template>
  <div class="footer-container">
    <!-- 中间的合计 -->
    <div>
      <span>共 {{total}} 件商品，合计：</span>
      <span class="price">￥{{totalPrice}}</span>
    </div>
    <!-- 右侧结算按钮 -->
    <button class="btn btn-success btn-settle">结算</button>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'CartFooter',
  computed: {
    ...mapGetters('cart', ['total', 'totalPrice'])
  }
}
</script>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/799328.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

驱动_阻塞io内核实现

驱动_阻塞io内核实现

相关API 1.定义等待队列头 wait_queue_head_t wq_head; 2.void init_waitqueue_head(struct wait_queue_head *wq_head) 功能&#xff1a;用于初始化一个等待队列 参数&#xff1a; wq_head:等待队列头节点指针 返回值&#xff1a;无3.wait_event(wq_head, condition) 功能&am…
阅读更多...
Antd DatePicker 日期选择框设置中文不生效

Antd DatePicker 日期选择框设置中文不生效

Antd 版本&#xff1a;4.21.6 moment 版本&#xff1a; 2.29.4 这里是 Antd 官网对于日期选择框国际化配置的说明 我是对 DatePicker 单独进行配置&#xff0c;而没有使用全局配置&#xff0c;但是发现代码未生效。 后来发现问题在于引入的路径有误&#xff0c;如下&#xf…
阅读更多...
Python中字符串拼接有哪些方法

Python中字符串拼接有哪些方法

目录 什么是字符串拼接 为什么要进行字符串拼接 Python中字符串拼接有哪些方法&#xff1f; 什么是字符串拼接 字符串拼接是将多个字符串连接在一起形成一个新的字符串的操作。在编程中&#xff0c;字符串拼接经常用于将不同的字符串组合在一起&#xff0c;以创建更长或更有…
阅读更多...
GO语言日志切割 + 记录调用源

GO语言日志切割 + 记录调用源

准备工作 日志记录对程序排查问题比较关键&#xff0c;记录下GO中日志选择&#xff0c;从以下出发点考虑&#xff1a; 日志文件能自动切割&#xff0c;以免过大能记录从哪个文件哪行代码调用的&#xff0c;方便排查问题配置简单明了库文件使用人数较多&#xff0c;稳定 经过一段…
阅读更多...
一大波涨姿势的小众网站，带你解锁新大陆！

一大波涨姿势的小众网站，带你解锁新大陆！

夏日炎炎&#xff0c;给大家分享20个涨姿势的小众网站&#xff0c;打开你的新世界大门&#xff01; 1、电台公园 http://radio.garden/ 可以收听到世界各地的电台&#xff0c;在世界地图上选一个绿点&#xff0c;就可以收听当地的电台了。 2、下载 4K 画质 Bing 壁纸 https…
阅读更多...
[OnWork.Tools]系列 03-软件设置

[OnWork.Tools]系列 03-软件设置

主题设置 点击右上角的设置按钮 可以切换为深色模式 系统设置 点击设置 开机自动运行: 开机自动启动 关闭最小化: 点击右上角关闭按钮时最小化到托盘 快捷键设置: 快速唤醒/隐藏界面 默认为AltO 关于 可以快速打开文件夹,方便调试使用
阅读更多...
0-超级计算机

0-超级计算机

超级计算机 概述主要特点处理能力并行处理大规模存储应用领域能耗云超算 中国超算流行体系结构片内异构节点内异构 概述 当谈到超级计算机时&#xff0c;我们指的是性能超高、处理能力强大的计算机系统。 它们通常由数以千计的处理器核心组成&#xff0c;并具备大规模的内存和…
阅读更多...
初识mysql数据库之事务的概念及操作

初识mysql数据库之事务的概念及操作

目录 一、数据库多客户端访问问题 1. 数据库的CURD无限制带来的问题 2. 如何解决CURD导致的问题 二、事务的概念 1. 什么是事务 2. 事务的四个属性 3. mysql对事务的管理 4. 为什么会有事务 5. 事务的版本支持 三、事务的操作 1. 事务提交方式 2. 事务操作的准备工…
阅读更多...
力扣简单1道_两数之和

力扣简单1道_两数之和

两数之和 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff0c;并返回它们的数组下标。你可以假设每种输入只会对应一个答案。但是&#xff0c;数组中同一个元素在答案里不能重复出现。你可以按任意顺序…
阅读更多...
【面试题】芯片中的IR drop现象是什么？

【面试题】芯片中的IR drop现象是什么？

这里是尼德兰的喵芯片面试相关文章，欢迎您的访问！ 如果文章对您有所帮助，期待您的点赞收藏，也欢迎您对文中存在的问题和疑惑进行评论 此外，gitee仓库尼德兰的喵 (gjm9999) - Gitee.com与微信公众平台也期待您的访问 让我们一起为芯片前端全栈工程师而努力！！！！ 今天突然…
阅读更多...
matlab Tabel操作

matlab Tabel操作

https://zhuanlan.zhihu.com/p/104266351 Table数据类型的引用要三点要注意&#xff1a; 1&#xff09;{}–花括号&#xff08;curly braces&#xff09;&#xff0c;()–小括号&#xff08;parentheses&#xff09;, .–圆点&#xff08;dot&#xff09;对Table类型数据的作用…
阅读更多...
架空线接地故障测试仪

架空线接地故障测试仪

一、凯迪正大架空线路接地故障定位仪产品概述 KDJK-10A只能在线路发生故障停运后进行故障定位&#xff0c;由发射机向故障线路施加高压将故障复现&#xff0c;超低频电流由发射机流向故障点&#xff0c;经过渡电阻进入大地并流回发射机&#xff1b;在线路沿线&#xff0c;将传…
阅读更多...
Python的包安装工具——pip命令大全

Python的包安装工具——pip命令大全

对于大多数使用Python的人来说&#xff0c;一定知道pip这个包安装工具&#xff0c;但是对pip可能还不是很了解&#xff0c;今天作者给大家介绍一下pip的命令&#xff0c;以方便灵活使用pip。 一、pip工具使用方法 pip的语法如下&#xff1a; pip <command> [options] 式中…
阅读更多...
elementPlus dialog组件设置可拖动，当内容高度大于视口高度拖动显示异常的解决办法

elementPlus dialog组件设置可拖动，当内容高度大于视口高度拖动显示异常的解决办法

elementPlus UI的dialog弹框组件在设置了draggable属性后就可拖动弹框&#xff0c;但是当弹框的内容高度大于视口高度时去拖动弹框就会出现显示问题。 解决办法&#xff08;修改源码&#xff09; 去node_modules下面找到element-plus文件夹&#xff0c;按照以下路径修改onMou…
阅读更多...
使用 monaco-editor-nls 汉化 右键菜单汉化部分失败原因

使用 monaco-editor-nls 汉化 右键菜单汉化部分失败原因

首先使用npm或者其他包管理工具安装依赖插件&#xff1a; npm install monaco-editor --save npm install monaco-editor-nls --save npm install monaco-editor-webpack-plugin --save npm install monaco-editor-esm-webpack-plugin --save-dev如果右键菜单汉化一部分失败&a…
阅读更多...
宋浩高等数学笔记（八）向量代数与空间解析几何

宋浩高等数学笔记（八）向量代数与空间解析几何

本章知识点并不难理解&#xff0c;但是公式与名词属于非常多&#xff0c;记忆时需重点对待。
阅读更多...
基于pytest的主流POM模式——测试框架的设计与实现

基于pytest的主流POM模式——测试框架的设计与实现

1、POM设计模式 ——页面对象模型&#xff08;Page object Modules&#xff09;&#xff0c;又名&#xff1a;PO/POM&#xff0c;是UI自动化最佳设计模式之一。把一个页面的测试用例&#xff0c;测试逻辑&#xff0c;封装为一个测试方法或者一个测试类&#xff08;说白了&…
阅读更多...
语音同声翻译软件让你不再为语言障碍困扰

语音同声翻译软件让你不再为语言障碍困扰

从前有一个叫黄俊的小伙子&#xff0c;他有一个大梦想&#xff1a;环游世界&#xff01;但是&#xff0c;他只会说中文&#xff0c;而去到外国又怎么跟当地人交流呢&#xff1f;为了实现自己的梦想&#xff0c;黄俊开始了寻找能帮他解决问题的捷径。这时&#xff0c;方娜向他介…
阅读更多...
开源快速开发平台：做好数据管理，实现流程化办公！

开源快速开发平台：做好数据管理，实现流程化办公！

做好数据管理&#xff0c;可以提升企业的办公协作效率&#xff0c;实现数字化转型。开源快速开发平台是深受企业喜爱的低代码开发平台&#xff0c;拥有多项典型功能&#xff0c;是可以打造自主可控快速开发平台&#xff0c;实现一对一框架定制的软件平台。在快节奏的社会中&…
阅读更多...
工业自动化数据485采集网关支持modbus协议

工业自动化数据485采集网关支持modbus协议

S475/S475E系列是一种功能丰富的设备&#xff0c;支持多种通信方式和输入输出功能。以下是对其功能的详细介绍&#xff1a; 通信方式&#xff1a; S475/S475E系列支持多种通信方式&#xff0c;包括短信、RS485、语音拨号、GPRS/3G/4G无线数据网络四种告警方式。这意味着用户可…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023