vuex 的基础使用

安装

shell

npm install vuex@next

创建 Store

每一个 Vuex 应用的核心就是 store（仓库）： store 本质上是一个容器，它包含着你的应用中大部分的状态（state）；

Vuex 和单纯的全局对象有什么区别呢？
第一：Vuex 的状态存储是响应式的
- 当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会被更新；
第二：你不能直接改变 store 中的状态
- 改变 store 中的状态的唯一途径就显示提交 (commit) mutation；
- 这样使得我们可以方便的跟踪每一个状态的变化，从而让我们能够通过一些工具帮助我们更好的管理应用的状态；
使用步骤：
- 创建 Store 对象；
- 在 app 中通过插件安装；

有几个不相关的组件，想要达成数据通讯

javascript

import { createApp } from 'vue'
import { createStore } from 'vuex'

// 创建一个新的 store 实例
const store = createStore({
  state () {
    return {
      count: 0
    }
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

const app = createApp({ /* 根组件 */ })

// 将 store 实例作为插件安装
app.use(store)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

state：组件想要共享的一个数据
mutation: 直接操作数据的
action: 什么时间去改变这个数据，需要 action 去触发（相等于 commit)

组件中使用 store

在组件中使用 store，我们按照如下的方式：在模板中使用；

在 options api 中使用，比如 computed；
在 setup 中使用

javascript

// 在 vue 组件内
import { useStore } from 'vuex'
import { key } from './store'

export default {
  setup () {
    const store = useStore(key)
    const count = computed(()=>store.state.count) // 类型为 number
  }
}

1
2
3
4
5
6
7
8
9
10

单一状态树

Vuex 使用单一状态树：

用一个对象就包含了全部的应用层级状；
采用的是 SSOT，Single Source of Truth，也可以翻译成单一数据源；
这也意味着，每个应用将仅仅包含一个 store 实例；
单状态树和模块化并不冲突，后面我们会讲到 module 的概念；

单一状态树的优势：

如果你的状态信息是保存到多个 Store 对象中的，那么之后的管理和维护等等都会变得特别困难；
所以 Vuex 也使用了单一状态树来管理应用层级的全部状态；
单一状态树能够让我们最直接的方式找到某个状态的片段，而且在之后的维护和调试过程中，也可以非常方便的管理和维护；

vuex 的基础使用 #

安装 #

创建 Store #

组件中使用 store #

单一状态树 #

vuex 的基础使用

安装

创建 Store

组件中使用 store

单一状态树