Vuex 笔记

简单的状态管理

不同组件通过data 绑定相同的对象，以此实现数据共享
this.$root.$data
缺点是不会留下变更记录
改良 -简单的 store 模式：

var store = {
  debug: true,
  state: {
    message: 'Hello!'
  },
  setMessageAction (newValue) {
    if (this.debug) console.log('setMessageAction triggered with', newValue)
    this.state.message = newValue
  },
  clearMessageAction () {
    if (this.debug) console.log('clearMessageAction triggered')
    this.state.message = ''
  }
}

组件不允许直接变更属于 store 实例的 state，而应执行 action 来分发 (dispatch) 事件通知 store 去改变，最终达成了 Flux 架构

---

全局状态管理器 Vuex

vuex 依赖 Promise 如果浏览器不支持，可以使用一个 polyfill 的库，例如 es6-promise

npm install vuex@next --save

创建store

// v3
const store = new Vuex.Store({ // v4 使用 createStore
  state: { // 定义全局状态
    abc: 0
  },
  mutations: { // 定义状态突变方法 commit
    increment(state) {
      state.abc++
    }
  },
  action: { // 实现异步操作的方法 dispatch
    aaa(context) { 
      context.commit('xxx')
    }
  }
})

访问方法：

this.$store.xx 
this.store.state.xx
/**
state --> state
getters --> getters['']
mutations --> commit
actions --> dispatch
*/

计算属性中做映射 ...mapState('xx')
vue3 <script setup>中可通过 useStore() 获得 store

在配置Vue实例时，通过 store选项（需调用 Vue.use(Vuex) 从根组件“注入”到每一个子组件中

mapState 辅助函数

辅助生成计算属性

Getters

state 派生状态

通过返回函数，可以每次调用都执行，而不是缓存

getters['tags/getTagNameList']

mapGetters 辅助函数

和 mapState 类似
还可以将 getter 属性另取一个名字

Mutation

不能直接调用一个 mutation 处理函数
类似于自定义事件emit：

 this.$store.commit('xxx')

提交载荷（Payload） store.commit 传入额外的参数 最终传入 mutation
对象风格的提交：

store.commit({
  type: 'increment', // 使用 type 属性指明 mutation
  amount: 10
})

在对象上添加新属性时，
Vue.set(obj, 'newProp', 123) 或 state.obj = { ...state.obj, newProp: 123 }

使用常量替代 Mutation 事件类型，把这些常量放在单独的文件中，整个 app 包含的 mutation 会变得一目了然

// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'

// store.js
import { SOME_MUTATION } from './mutation-types'
···
  mutations: {
    // 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
    [SOME_MUTATION] (state) {
      // mutate state
    }
  }
···

Action

Action 提交的是 mutation，而不是直接变更状态。
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象

异步调用 this.$store.dispatch('aaa')

同样支持 载荷方式和对象方式

store.dispatch 可以处理被触发的 action 处理函数返回的 Promise，
并且 store.dispatch 仍旧返回 Promise
样例链接

一个 store.dispatch 在不同模块中可以触发多个 action 函数。在这种情况下，只有当所有触发函数完成后，返回的 Promise 才会执行。

Module

将 store 进行分割

• 模块内部的 mutation 和 getter 接收到第一个参数局部状态对象
• action：局部状态通过 context.state 暴露出来，根节点状态则为 context.rootState
• 模块内部的 getter，根节点状态会作为第三个参数暴露

默认情况下，mutation、getter等 是直接注册到根的
namespaced: true 使其成为带命名空间的模块

store
  ├── index.js          # 我们组装模块并导出 store 的地方
  ├── actions.js        # 根级别的 action
  ├── mutations.js      # 根级别的 mutation
  └── modules
      ├── cart.js       # 购物车模块
      └── products.js   # 产品模块

封装

// store.js
import {createStore} from 'vuex'
import moduleA from 'moduleA.js'

export default createStore({
  state: { // 定义全局状态
    abc: 0
  },
  mutations: { // 定义状态突变方法 commit
    increment(state) {
      state.abc++
    }
  },
  action: { // 实现异步操作的方法 dispatch
    aaa(context) { 
      context.commit('xxx')
    }
  },
  modules: {
    a: moduleA // store.state.a
  }
})

Vue 使用：

import store from 'store.js'

app.use(store)