vuex

管理通用数据的工具

场景：

1. 某个状态在多个组件中使用（个人信息）

2. 多个组件共同维护一份数据（购物车）

优势：

1. 共同维护，集中管理

2. 响应式变化

3. 操作简介

// 存放vuex核心代码
import Vue from 'vue'
import Vuex from 'vuex'
// 插件安装
Vue.use(Vuex)
// 创建仓库
const store = new Vuex.Store()

// 导出给main.js使用
export default store

//main.js
import Vue from 'vue'
import App from './App.vue'
import store from '@/store/index'

Vue.config.productionTip = false

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

store 公共数据源

获取store

• this.$store

模版中：{{$store.state.xxx}}

组件逻辑中：this.$store.state.xxx

• import 导入 store

js模块中：store.state.xxx

辅助函数获取

mapState(['count', 'title']) 提取仓库的state到组件的computed属性

修改store

❌❌❌❌❌❌❌错误做法  

handleAdd () {
      // 错误代码。
      this.$store.state.count++
      console.log(this.$store.state.count)
    }
vue不会检测 监测需要成本
  const store = new Vuex.Store({
  // 开启严格模式   有利于初学者检测不规范的代码    上线移除
  strict: true,
//直接修改 严格模式下会报错

使用mutation

基本使用（不传参）

mutation传参

提交载荷payload  有且只有这一个参数

如果要传多个  包装成对象

Vuex中的值和组件中的input双向绑定

mapMutation

位于mutation的方法隐射到组件的methods

异步actions

mapActions

位于Actions的方法隐射到组件的methods

getters

一般用法通过store访问

mapGetters

vuex-分模块

vuex是单一状态树，应用的所有状态会集中到一个比较大的对象 项目越来越多，越来越难维护

分模块处理 单一职责，减少耦合

访问数据

① 直接通过模块名访问 $store.state.模块名.xxx</span></p><p class="ne-p" style="margin-top: 0px; margin-bottom: 0px; padding: 0px; min-height: 24px;"><span class="ne-text" style="color: rgb(77, 77, 77);">② 通过 mapState 映射</span></p><p class="ne-p" style="margin-top: 0px; margin-bottom: 0px; padding: 0px; min-height: 24px;"><span class="ne-text" style="color: rgb(77, 77, 77);">默认根级别的映射</span><span class="ne-text" style="color: rgb(77, 77, 77);"> </span><span class="ne-text" style="background-color: rgb(248, 248, 64);">mapState([ ‘xxx’ ])</span></p><p class="ne-p" style="margin-top: 0px; margin-bottom: 0px; padding: 0px; min-height: 24px;"><span class="ne-text" style="color: rgb(77, 77, 77);">子模块的映射 </span><span class="ne-text" style="background-color: rgb(248, 248, 64);">mapState(‘模块名’, [‘xxx’])</span><span class="ne-text" style="color: rgb(77, 77, 77);"> - 需要开启命名空间</span></p><p class="ne-p" style="margin-top: 0px; margin-bottom: 0px; padding: 0px; min-height: 24px;"><img src="https://cdn.nlark.com/yuque/0/2025/png/43139252/1751376290606-9d08fba6-7cba-4f28-9db3-34964e94b910.png" width="1227" title="" id="ue684cb85" class="ne-image"/></p><h4 style="line-height: 24px; margin: 10px 0px 5px;"><span class="ne-text" style="color: rgb(77, 77, 77)">使用模块中 getters 中的数据：</span></h4><p class="ne-p" style="margin-top: 0px; margin-bottom: 0px; padding: 0px; min-height: 24px;"><span class="ne-text" style="color: rgb(77, 77, 77)">① 直接通过模块名访问 </span><span class="ne-text" style="background-color: rgb(248, 248, 64);">$store.getters['模块名/xxx ']           特殊字符[]方式访问

②通过 mapGetters 映射

默认根级别的映射 mapGetters([ ‘xxx’ ])

子模块的映射 mapGetters(‘模块名’, [‘xxx’]) - 需要开启命名空间

mutation

目标：掌握模块中 action 的调用语法 (同理 - 直接类比 mutation 即可)

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

调用子模块中 action ：

① 直接通过 store 调用 $store.dispatch('模块名/xxx ', 额外参数)

② 通过 mapActions 映射

默认根级别的映射 mapActions([ ‘xxx’ ])

子模块的映射 mapActions(‘模块名’, [‘xxx’]) - 需要开启命名空间

购物车案例vuex

功能

1. 请求动态渲染购物车，数据存vuex

2. 数字框控件修改数据

3. 动态计算总价和总数量

安装全局工具 json-server （全局工具仅需要安装一次）官网

yarn global add json-server 或 npm i json-server -g

1. 代码根目录新建一个 db 目录

2. 将资料 index.json 移入 db 目录

3. 进入 db 目录，执行命令，启动后端接口服务

json-server index.json

访问接口测试 http://localhost:3000/cart

推荐： json-server --watch index.json (可以实时监听 json 文件的修改)

1. 请求获取数据存入 vuex, 映射渲染

2. 修改数量功能完成

3. 底部getter统计

<br/>