Vuex基础知识

在开发中，应用程序有时需要处理各种各样的数据，这些数据需要保存在我们应用程序中的某一个位置，对于这些数据的管理我们称之为状态管理。

Vuex

官方文档
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
什么是“状态管理模式”？

const Counter = {
   
  // 状态
  data () {
   
    return {
   
      count: 0
    }
  },
  // 视图
  template: `
    
{
    { count }}
  `,
  // 操作
  methods: {
   
    increment () {
   
      this.count++
    }
  }
}

createApp(Counter).mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

这个状态自管理应用包含以下几个部分：

• 状态，驱动应用的数据源；
• 视图，以声明方式将状态映射到视图；
• 操作，响应在视图上的用户输入导致的状态变化。

安装

npm install vuex@next --save
yarn add vuex@next --save

案例

创建store

在main.js中注册store

使用：

state中的count发生改变时，任何引入这个state的地方都会随着发生变化。

State

Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。

单状态树和模块化并不冲突——在后面的章节里我们会讨论如何将状态和状态变更事件分布到各个子模块中。

存储在 Vuex 中的数据和 Vue 实例中的 data 遵循相同的规则，例如状态对象必须是纯粹 (plain) 的。

使用：

<script setup>
import  {
    computed, toRefs } from 'vue';
import {
    useStore, mapState } from 'vuex';
const store = useStore();
// 方法1
// const { count } = mapState(['count']);
// 方法2
//const count = computed(() => store.state.count)
// 方法3 组合式API用store.state是不可响应的
const {
    count } = toRefs(store.state) 
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Getter

相当于computed属性。

const store = createStore({
   
  state: {
   
    todos: [
      {
   <
1
2
3
4
5
6