Vue2(三)

2023-07-06

vuex

管理通用数据的工具

场景：

某个状态在多个组件中使用（个人信息）
多个组件共同维护一份数据（购物车）

优势：

共同维护，集中管理
响应式变化
操作简介

// 存放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② 通过 mapState 映射默认根级别的映射 mapState([ ‘xxx’ ])子模块的映射 mapState(‘模块名’, [‘xxx’]) - 需要开启命名空间<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"/><h4 style="line-height: 24px; margin: 10px 0px 5px;">使用模块中 getters 中的数据：</h4>① 直接通过模块名访问 $store.getters['模块名/xxx '] 特殊字符[]方式访问

②通过 mapGetters 映射

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

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