官方网站：https://vuex.vuejs.org/
责任编辑将如是说附注：
Vuex核心理念应用领域1.State：插件的状况统计数据储存在单个的状况根上。2. Mutations：用作修正State的并行表达式，要是纯表达式。3. Actions：处置触发器操作方式，能包涵数个Mutations的初始化。4. Getters：从State中派萌发捷伊统计数据，近似于排序特性。5. Module：模组化能使状况管理组织工作更加形式化和可保护，易于工程项目组协同和标识符F83E43SeVuex核心理念应用领域
毕竟找不出甚么相片，将就着哈哈
State（状况）
State（状况）是Vuex中的核心理念基本概念众所周知，它则表示插件的统计数据状况。State能被看做是应用程序的单个管理组织工作工具，包涵了各式各样特性和统计数据，用作叙述插件现阶段的状况。
毕竟找不出甚么相片，将就着哈哈
在Vuex中，State一般来说被表述为两个JavaScript或TypeScript第一类。那个第一类中的特性能是任一的统计正则表达式，如字符串、位数、字符串、第一类等。State的值能在整座插件中被加载，但无法间接被模块修正，须要透过Mutations或Actions来修正State的值。
State的主要特征主要就包括：
单个管理组织工作工具： 整座插件的状况被储存在两个State第一类中，使状况的管理组织工作显得分散和完全一致。精确性：State的值是积极响应式的，当State的值发生改变时，采用该State的模块会离线。这种能维持插件的状况连续性，增加了全自动并行的组织工作。只能透过Mutations或Actions进行修正：为了确保State的可追踪性和状况变更的连续性，State的值只能透过提交（commit）Mutations或Actions来进行修正。这种能更好地跟踪状况变化和调试插件。透过表述和采用State，我们能将插件的统计数据状况与模块解耦，提高标识符的可保护性和可扩展性。同时，State的分散管理组织工作也使状况变更的流程更为可控和可预测，简化了状况管理组织工作的复杂性。
下面是两个简单的示例，展示了如何在Vuex中表述和采用State：
./store/index.ts
import{ createStore}from vuex const store = createStore({ state: { count: 0, // 示例状况特性 loggedIn: false, // 示例状况特性 }, }); export default store;store;./main.ts
import { createApp } from vue import App from ./App.vue import store from ./store createApp(App).use(store).mount(#app)./components/CounterDemo.vue
<template> <h2>Counter 模块</h2> <p>{{ store.state.count }}</p> <p>{{ store.state.loggedIn }}</p> <p>{{ count }}</p> <p>{{ loggedIn }}</p> </template> <script lang=“ts” setup> import { useStore} from vuex; import { computed } from vue; conststore = useStore();const count = computed<Number>(()=>store.state.count++); const loggedIn = computed<boolean>(()=>store.state.loggedIn);</script>./App.vue
<template> <h1>Vue3工程项目课堂教学-第二卷（状况管理组织工作-Vuex 此基础应用领域）</h1> <CounterDemo/> </template> <script setup lang=“ts”> import CounterDemo from ./components/CounterDemo.vue </script> <style scoped></style>在上面的示例中，我们创建了两个名为store的Vuex实例，其中state第一类包涵了两个状况特性：count和loggedIn。在模块中，我们采用const store = useStore(); 实例的方式进行访问。
这种，模块将根据State的值离线相关的界面内容。当State的值发生改变时，模板中相应的统计数据绑定也会被更新。
须要注意的是，State是只读的，模块无法直接修正State的值。如果须要修正State，应该采用Mutations或Actions来提交对应的变更操作方式。
Mutations
毕竟找不出甚么相片，将就着哈哈
更改 Vuex 的 store 中的状况的唯一方法是提交 mutation。Vuex 中的 mutation 非常近似于事件：每个 mutation 都有两个字符串的 事件类型 (type) 和两个 回调表达式 (handler)。，Mutations在Vuex中用作修正State的并行表达式，并且要是纯表达式。
纯表达式是指在相同的输入下，总是返回相同的输出，并且没有副作用的表达式。在Vuex的Mutations中，我们须要遵循那个原则，以确保State的变更具有可追踪性和连续性。
以下是Mutations的一些特征和采用注意事项：
并行表达式：Mutations中的表达式要是并行的，无法包涵触发器操作方式，例如网络请求或定时器。如果须要执行触发器操作方式，应该采用Actions来处置。修正State：Mutations的主要就目的是修正State的值。透过在Mutations中对State进行间接修正，能确保状况的变更是可追踪和可控的。纯表达式：Mutations应该是纯表达式，意味着它们的行为仅取决于传入的参数，不依赖于外部状况或产生副作用。这种能维持状况变更的精确性，方便调试和测试。提交Mutations：在模块中，要初始化Mutations来修正State，能采用store的commit方法提交对应的Mutation。例如：this.$store.commit(mutationName, payload)，其中mutationName是Mutation的名称，payload是传递给Mutation的参数。命名约定：为了避免冲突和提高可保护性，一般来说建议采用常量来表述Mutation的名称，以及在根State中采用命名空间（namespace）来组织Mutations。透过合理采用Mutations，我们能在Vuex中维持对State的连续性修正，并确保状况的变更是可预测和可追踪的。这有助于更好地管理组织工作和保护插件的状况。
修正 ./store/index.ts
import { createStore } from “vuex”; const store = createStore({ state: { count: 0, // 示例状况特性 loggedIn: false, // 示例状况特性 }, mutations: { increment(state: { count: any; }) { state.count++; }, decrement(state: { count: number; }) { state.count=0; }, setCount(state: {count: any; }, payload: any) { state.count = payload; }, }, }); export default store;修正 ./components/CounterDemo.vue
<template> <h2>Counter 模块</h2> <p>{{ store.state.count }}</p> <p>{{ store.state.loggedIn }}</p> <p>{{ count }}</p> <p>{{ loggedIn }}</p> <p><button @click=“incrementCount”>incrementCount</button></p> <p><button @click=“decrementCount”>decrementCount</button></p> <p><button @click=“setCountToValue”>setCountToValue</button></p> </template> <script lang=“ts” setup> import{ useStore}from vuex; import { computed } from vue; const store = useStore(); const count = computed<Number>(()=>store.state.count++);const loggedIn = computed<boolean>(()=>store.state.loggedIn); const incrementCount=()=>{ store.commit(increment) } const decrementCount=()=>{ store.commit(decrement) } const setCountToValue=()=>{ store.commit(setCount,10) } </script>在上面的示例中，我们表述了三个Mutations：increment、decrement和setCount。increment和decrement分别用作增加和增加count状况特性的值，而setCount用作将count的值设置为传入的payload。
在模块中，我们透过store.commit(mutationName, payload)来初始化对应的Mutation。例如，我们能在方法中初始化store.commit(increment)来增加count的值，或者初始化store.commit(setCount, 10)将count的值设置为10。
透过采用Mutations，我们能确保对State的修正是并行和可追踪的。
须要注意的是，Mutations应该只用作修正State，而不应该包涵复杂的逻辑或触发器操作方式。如果须要执行触发器操作方式，应该采用Actions来处置。
Actions
毕竟找不出甚么相片，将就着哈哈
Actions在Vuex中用作处置触发器操作方式和触发Mutations。它们能包涵任一的触发器操作方式，如网络请求、定时器等，并且能在须要时触发两个或数个Mutations来修正State。
Actions的主要作用是将触发器操作方式和状况变更进行解耦，使状况管理组织工作更为灵活和可扩展。透过Actions，我们能处置复杂的触发器逻辑，然后再提交（commit）对应的Mutations来修正State。
以下是Actions的一些特征和采用注意事项：
触发器操作方式：Actions能包涵触发器操作方式，如网络请求、定时器等。在Actions中能执行触发器任务，并在触发器任务完成后提交对应的Mutations来修正State。触发Mutations：Actions透过初始化commit方法来触发Mutations。采用context.commit(mutationName, payload)来提交对应的Mutation，其中context是两个包涵了commit方法的第一类。触发器操作方式完成后的回调：Actions能返回两个Promise，在触发器操作方式完成后能透过Promise的then方法来执行回调操作方式，或者采用async/await语法来处置触发器逻辑。组合数个Mutations：两个Action能触发数个Mutations来修正State。透过在Action中依次初始化数个Mutations，能对State进行复杂的变更操作方式。命名约定：为了避免冲突和提高可保护性，一般来说建议采用常量来表述Action的名称，并在根State中采用命名空间（namespace）来组织Actions。以下是两个简单的示例，展示了如何在Vuex中表述和采用Actions：
修正 ./store/index.ts
import { createStore } from “vuex”; conststore = createStore({ state: { count:0, // 示例状况特性 loggedIn: false, // 示例状况特性 }, mutations: { increment(state: { count: any; }) { state.count++; }, decrement(state: { count: number; }) { state.count=0; }, setCount(state: { count:any; }, payload: any) { state.count = payload; }, }, actions: { incrementAsync(context: { commit:(arg0: string) => void; }) { setTimeout(() =>{ context.commit(increment); }, 1000); }, }, }); export default store;修正 ./components/CounterDemo.vue
<template> <h2>Counter 模块</h2> <p>{{ store.state.count }}</p> <p>{{ store.state.loggedIn }}</p> <p>{{ count }}</p> <p>{{ loggedIn }}</p> <p><button @click=“incrementCount”>incrementCount</button></p> <p><button @click=“decrementCount”>decrementCount</button></p> <p><button @click=“setCountToValue”>setCountToValue</button></p> <p><button @click=“incrementCountAsync”>incrementCountAsync</button></p> </template> <script lang=“ts” setup> import { useStore} from vuex; import { computed } from vue; conststore = useStore();const count = computed<Number>(()=>store.state.count++); const loggedIn = computed<boolean>(()=>store.state.loggedIn);const incrementCount=()=>{ store.commit(increment) } constdecrementCount=()=>{ store.commit(decrement) } const setCountToValue=()=>{ store.commit(setCount,10) } const incrementCountAsync = ()=> { store.dispatch(incrementAsync); }</script>在上面的示例中，我们表述了两个Action incrementAsync，它会在1秒后触发对应的Mutation increment。在模块中，我们透过store.dispatch(actionName)来初始化Action，例如store.dispatch(incrementAsync)。
透过采用Actions，我们能更好地处置触发器操作方式和复杂逻辑，并将状况变更和触发器操作解耦，使状况管理组织工作更为灵活和可保护。同时，Actions也提供了一种可追踪的方式来处置触发器任务的结果和状况变更。
Getters
毕竟找不出甚么相片，将就着哈哈
Getters在Vuex中用作从State中派萌发捷伊状况，近似于Vue模块中的排序特性。它们能对State进行处置、筛选和排序，并返回派生的值。Getters在采用时近似于State特性，但它们能根据须要动态地排序捷伊值。
以下是Getters的一些特征和采用注意事项：
派生状况：Getters用作派生捷伊状况，这些状况能基于现有的State进行排序、筛选或转换。缓存机制：默认情况下，Getters具有缓存机制，即当Getters所依赖的State发生改变时，只有当其依赖的State发生改变时，Getters才会重新排序。这能提高性能，避免不必要的排序。访问Getters：在模块中，能透过this.$store.getters来访问Getters。能像访问State特性一样采用Getters，例如this.$store.getters.getterName。Getters的参数：Getters能接受两个参数：state和getters。state参数提供对现阶段的State的访问，而getters参数提供对其他Getters的访问。这能使Getters之间能相互依赖和组合。以下是两个简单的示例，展示了如何在Vuex中表述和采用Getters：
修正 ./store/index.ts
import { createStore } from “vuex”; const store = createStore({ state: { count: 0, // 示例状况特性 loggedIn: false, // 示例状况特性 users: [ { id: 1, name: User 1, sex: true }, { id: 2, name: User 2, sex: false }, { id: 3, name: User 3, sex: true }, ], }, getters: { sexTrue(state: { users: any[]; }) { return state.users.filter(user => user.sex); }, sexFalse(state: { users: any[]; }) { return state.users.filter(user => !user.sex); }, totalSex(state: { users: string | any[]; }) { return state.users.length; }, }, mutations: { increment(state: { count: any; }) { state.count++; }, decrement(state: { count: number; }) { state.count=0; }, setCount(state: { count: any; }, payload: any) { state.count = payload; }, }, actions: { incrementAsync(context: { commit: (arg0: string) => void; }) { setTimeout(() => { context.commit(increment); }, 1000); }, }, }); export default store;修正 ./components/CounterDemo.vue
<template> <h2>Counter 模块</h2> <p>{{ store.state.count }}</p> <p>{{ store.state.loggedIn }}</p> <p>{{ count }}</p> <p>{{ loggedIn }}</p> <p><button @click=“incrementCount”>incrementCount</button></p> <p><button @click=“decrementCount”>decrementCount</button></p> <p><button @click=“setCountToValue”>setCountToValue</button></p> <p><button @click=“incrementCountAsync”>incrementCountAsync</button></p> <p>getters -> sexTrue: {{ sexTrue }}</p> <p>getters -> sexFalse: {{ sexFalse }}</p> <p>getters -> totalSex: {{ sexTotal }}</p> </template> <script lang=“ts” setup> import { useStore } from vuex; import { computed } from vue; conststore = useStore();const count = computed<Number>(() => store.state.count++); constloggedIn = computed<boolean>(() => store.state.loggedIn); const sexTrue = computed(() => store.getters.sexTrue); constsexFalse = computed(() => store.getters.sexFalse); const sexTotal = computed(() => store.getters.totalSex); constincrementCount =() => { store.commit(increment) } const decrementCount = () =>{ store.commit(decrement) } const setCountToValue = () => { store.commit(setCount, 10) } const incrementCountAsync = () => { store.dispatch(incrementAsync); } </script>在上面的示例中，我们表述了三个Getters：sexTrue、sexFalse和sexTotal。sexTrue返回sex=true的user列表，sexFalse返回sex=false的user列表，totalTodos返回user的总数。
的user列表。
透过采用Getters，我们能更方便地派生和排序State中的新状况，使统计数据处置更为灵活和可保护。Getters也能在数个模块之间共享，避免了重复的排序和标识符冗余。
Module
实在找不出甚么相片，将就着哈哈
在Vuex中，Module是用作将大型的、复杂的状况分割为更小的、可管理组织工作的模块的机制。它能将两个大的Vuex插件拆分成数个模块，每个模块都有自己的State、Mutations、Actions和Getters，以便更好地组织和管理组织工作状况。
采用Module能提供以下优势：
模组化：的可读性、可保护性和可扩展性。命名空间：每个模块都有自己的命名空间，能避免命名冲突。在模块中访问模块的State、Mutations、Actions和Getters时，须要采用命名空间来区分。组合模块：能将数个模块组合在一起，构建出完整的插件状况。这使多人协同开发更容易，能同时处置不同模块的状况。以下是两个简单的示例，展示了如何在Vuex中创建和采用模块：
// 创建两个模块 const moduleA = { state: { … }, mutations: { … }, actions: { … }, getters: { … }, }; const moduleB = { state: { … }, mutations: { … }, actions: { … }, getters: { … }, }; const store = new Vuex.Store({ modules: { moduleA, moduleB, }, // 根模块的state、mutations、ac }); export default store;模块中采用
import { useStore } from vuex; import{ computed }from vue; const store = useStore(); const count = computed<Number>(() => store.state.moduleA.count++); const loggedIn = computed<boolean>(() => store.state.moduleB.loggedIn); const incrementCount = () =>{ store.dispatch(moduleB/actionName)) }在上面的示例中，我们创建了两个模块moduleA和moduleB，每个模块都有自己的State、Mutations、Actions和Getters。然后，我们将这两个模块添加到根Store的modules选项中。
在模块中访问模块的State和操作方式时，须要采用命名空间来区分。例如，能透过
store.state.moduleA.stateProperty来访问moduleA模块的状况特性，透过store.dispatch(moduleB/actionName)来初始化moduleB模块的Action。透过使用模块，我们能更好地组织和管理组织工作大型插件的状况，使标识符结构更清晰、可保护性更高。模块之间的依赖关系和交互也更为明确和可控。
