+Vue+Vuex のバックアップ(No.2)

バックアップ一覧
差分を表示
現在との差分を表示
ソースを表示
+Vue+Vuex へ行く。
- 1 (2022-12-11 (日) 15:00:40)
- 2 (2022-12-11 (日) 15:18:12)
- 3 (2022-12-12 (月) 11:49:34)

uni-app

※前提条件：vue3 的uniapp开发

概要

概要 †[edit]

每一个 Vuex 应用的核心就是 store（仓库），它包含着你的应用中大部分的状态 (state)。

状态管理有5个核心：state、getter、mutation、action、module。

↑

state †[edit]

单一状态树，定义应用状态的默认初始值，页面显示所需的数据从该对象中进行读取。

Vuex 使用单一状态树，用一个对象就包含了全部的应用层级状态。它便作为一个“唯一数据源”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。
单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。
不可直接对 state 进行更改，需要通过 Mutation 方法来更改。

由于 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态：注意：以下的代码，实际并不会使用，这里只作为讲解介绍使用

// 创建一个 Counter 组件
const Counter = {
	computed: {
		count () {
			return store.state.count
		}
	}
}

每当 store.state.count 变化的时候, 都会重新求取计算属性，并且触发更新相关联的 DOM。

然而，这种模式导致组件依赖全局状态单例。在模块化的构建系统中，在每个需要使用 state 的组件中需要频繁地导入，并且在测试组件时需要模拟状态。

Vuex 通过 store 选项，提供了一种机制将状态从根组件“注入”到每一个子组件中（需调用 Vue.use(Vuex)）：

↑

获取state †[edit]

通过属性访问，需要在根节点注入 store

import store from '@/store/index.js';//需要引入store
export default {
	data() {
		return {}
	},
	computed: {
		username() {
			return store.state.username
		}
	}
}

↑

在组件中使用，通过 this.$store 访问到 state 里的数据 †[edit]

export default {
	data() {
		return {}
	},
	computed: {
		username() {
			return this.$store.state.username
		}
	}
}

↑

vuex与全局变量区别 †[edit]

vuex	全局变量
不能直接改变store里面的变量，由统一的方法修改数据	可以任意修改
每个组件可以根据自己vuex的变量名引用不受影响	全局变量可能操作命名污染
解决了多组件之间通信的问题	跨页面数据共享
适用于多模块、业务关系复杂的中大型项目	适用于demo或者小型项目

↑

什么时候需要用vuex †[edit]

当一个组件需要多次派发事件时。例如购物车数量加减。
跨组件共享数据、跨页面共享数据。例如订单状态更新。
需要持久化的数据。例如登录后用户的信息。
当您需要开发中大型应用，适合复杂的多模块多页面的数据交互，考虑如何更好地在组件外部管理状态时。

↑

使用 Vuex 需要遵守的规则： †[edit]

应用层级的状态应该集中到单个 store 对象中。
提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。
异步逻辑都应该封装到 action 里面。

只要你遵守以上规则，如何组织代码随你便。如果你的 store 文件太大，只需将 action 、mutation 和 getter 分割到单独的文件。

对于大型应用，我们会希望把 Vuex 相关代码分割到模块中。下面是项目结构示例：

├── pages
├── static
└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    └── modules           # 模块文件夹
        ├── cart.js       # 购物车模块
        └── products.js   # 产品模块
├── App.vue
├── main.js
├── manifest.json
├── pages.json
└── uni.scss

Comment：