Vuex 解决了
多个视图依赖于同一状态
和来自不同视图的行为需要变更同一状态
的问题,将开发者的精力集中于数据的更新而不是数据在组件之间的传递上。本文以购物车为例,对概念没有过多阐述,建议先浏览官网:https://vuex.vuejs.org/
一. 预期效果
- 【页面】商品列表组件、购物车列表组件、商品结算组件
- 【功能】将商品加入购物车,更新购物车列表
- 【功能】增减商品时,库存、总数、总价变化
二. 具体实现
1.文件结构
store
├── index.js # 导出 store 的地方
├── state.js # 根级别的 state
├── getters.js # 二次包装state数据
├── actions.js # 根级别的 action
├── mutations.js # 根级别的 mutation
├── mutation-types.js # 所有 mutation 的常量映射表
2.安装
npm install vuex --save
3.在src目录下新建store/index.js
,代码如下:
import Vue from 'vue';
import Vuex from 'vuex';
import actions from '@/store/actions.js';
import getters from '@/store/getters.js';
import mutations from '@/store/mutations.js';
import state from '@/store/states.js';
Vue.use(Vuex);
export default new Vuex.Store({
state,
mutations,
getters,
actions,
})
4.在main.js文件中引入
import router from './router'
import store from './store/index'
new Vue({
el: '#app',
router,
util,
store,
components: {App},
template: '<App/>'
})
5.页面搭建及组件实现(注:这里的组件都是全局注册的,可参考:https://blog.csdn.net/try_try_try/article/details/85264175)
- 数据准备
goodsData: [
{ 'id': 1, 'url':imgTmp, 'name': "美的洗碗机", 'price': 2000,'inventory':5,'num':1 },
{ 'id': 2, 'url':imgTmp, 'name': "美的豆浆机", 'price': 1000,'inventory':100,'num':1 },
{ 'id': 3, 'url':imgTmp, 'name': "美的微波炉", 'price': 1500,'inventory':80,'num':1 }
]
- 商品列表项组件(goodsItem)
<template>
<div class="goods_item">
<div class="goods_item_content">
<div class="goods_item_radio">
<img style="width:60px;height:60px" :src="good.url" alt="">
</div>
<div class="goods_item_title">
<div class="goods_item_name" >{
{good.name}}</div>
<div class="goods_item_name" style="color: gray" >库存: {
{good.inventory}}</div>