Vuex是什么？

Vuex是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

概念

• 状态（State）：Vuex 使用单一状态树，即用一个对象就包含了全部的应用层级状态。它作为“唯一数据源”而存在。
• Getter ：允许组件从 Store 中获取状态，相当于 Store 的计算属性。
• Mutation：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Mutation 需遵守 Vue 的响应规则，最好提前在 store 中初始化所有所需属性。
• Action：Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态；Action 可以包含任意异步操作。
• Module：由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。

作用

• 维护多组件共享的状态。
• 统一管理和维护应用的状态，便于开发和后期维护。
• 提供一种机制，方便地实现如“撤销/重做”等复杂功能。

应用场景

• 中大型单页应用：多个视图组件需要共享状态。
• 需要跨组件共享数据的复杂应用。
• 需要维护复杂的状态关系和状态变化的业务逻辑。

使用方式

1. 安装 Vuex：

   npm install vuex@next --save
   1

2. 创建 Vuex Store：

   import { createStore } from 'vuex';
   const store = createStore({
     state() {
       return {
         count: 0
       };
     },
     mutations: {
       increment(state) {
         state.count++;
       }
     },
     actions: {
       increment(context) {
         context.commit('increment');
       }
     },
     getters: {
       doubleCount(state, payload) {
         return state.count  + payload;
       }
     }
   });
   export default store;
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24

3. 在 Vue 应用中引入并使用 Store：

   import { createApp } from 'vue';
   import App from './App.vue';
   import store from './store';
   const app = createApp(App);
   app.use(store);
   app.mount('#app');
   1
   2
   3
   4
   5
   6

4. 在组件中提交Mutation在Vue组件中，你可以使用store.commit方法来提交mutation，并传入所需的参数（如果有的话）。

	<template>
	  <div>
	    <button @click="incrementCount(2)">Increment</button>
	    <p>Count: {{ count }}</p>
	  </div>
	</template>
	
	<script>
	import { computed } from 'vue';
	import { useStore } from 'vuex';
	
	export default {
	  setup() {
	    const store = useStore();
	    const count = computed(() => store.state.count);
	
	    function incrementCount(amount) {
	      store.commit('increment', { amount });
	    }
	
	    return {
	      count,
	      incrementCount
	    };
	  }
	};
	</script>
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
27

4. 在 Vue 组件中访问 Vuex 状态：

   <template>
     <div>{{ count }}</div>
   </template>
   <script>
   import { computed } from 'vue';
   import { useStore } from 'vuex';
   export default {
     setup() {
       const store = useStore();
       const count = computed(() => store.state.count);
       return {
         count
       };
     }
   };
   </script>
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16

Vuex 提供了一套完整的状态管理解决方案，适用于需要大规模状态管理的应用程序。通过集中管理状态，Vuex 使得应用程序更加结构化和可维护。