《Vuex状态管理笔记》

49 阅读1分钟

创建store

  • 每一个vuex应用的核心就是store(仓库)
    • store本质上是一个容器,它包含着你应用中大部分的状态(state)
  • vuex和单纯的全局对象有什么区别
    • vuex的状态是响应式的,若store中的状态发生变化,那么相应的组件也会被更新
    • 改变store中的状态的唯一途径就是提交(commit)mutations
  • 使用步骤
    • 创建store对象
    • 在app中通过插件安装

概念:单一状态树

  • vuex使用单一状态树
    • 用一个对象就包含了全部的应用层级的状态
    • 采用的是SSOT,Single Source of Truth,也可以翻译成单一数据源
  • 这也意味着,每个应用将仅包含一个store实例
  • 单一状态树的优势
    • 如果你的状态是保存到多个store对象当中,那么之后的管理和维护都会变得困难
    • 单一状态树能最直接的方式找到某个状态的片段

在state中定义状态

image.png

在mutations里定义方法,并且用commit提交

d57edfc9cc9c8ee941e369a62f1d4a4c.jpg

df5d316b4b828c6f25a0af00990a90f5.jpg

组件获取状态

e4aba334138b53dbd60a500c3abbbb99.jpg

15edba83edff95468499ffa8a3cf89e6.png

getters的两个参数

image.png

getters的三种使用方法(类似computed)

95f20affb1bccad5cf49e88d5c6bc28f.png

mutations的参数

c1e65a6434cf2531a8e930c657dd9241.png

actions的基本使用

26a4dfc06efb7d505cdd989cac978230.png

actions的分发操作

79f75922b8263a545a7550d563e65970.jpg

module的基本使用

666bd7c4e731a5eca6654d45bd0cbc8c.jpg

module的参数

efd23382a587237a1c3e44e50c9b0e2f.png

module的命名空间

3236063a3c2a4f5697f34b16e17c0743.png

cfd8b392bd1365f146887b30d630a6e6.png