Vuex 使用实例

Vuex

介绍

简单来说就是，多个组件需要共享一个data，原本只能通过父子组件来进行，但是vuex可以实现共享data

使用步骤

安装

npm install vuex@next

查看我们的 pakege.json 可以发现安装是否成功


已经安装成功

使用

定义配置文件

在项目的 src 目录下创建一个 store 文件夹，并在其中创建一个 index.js 或 index.ts 文件来定义 Vuex store

加入配置代码

// src/store/index.js  
import { createStore } from 'vuex';  export default createStore({  state: {  count: 0,  user: {  name: 'John Doe',  age: 30  }  },  mutations: {  increment(state) {  state.count++;  },  updateUserName(state, newName) {  state.user.name = newName;  }  },  actions: {  asyncIncrement({ commit }) {  setTimeout(() => {  commit('increment');  }, 1000);  },  updateUserNameAction({ commit }, newName) {  commit('updateUserName', newName);  }  },  getters: {  doubleCount(state) {  return state.count * 2;  },  userAge(state) {  return state.user.age;  }  }  
});

代码解释：

state（状态）
含义：state 是 Vuex 中的基本数据，用于存储应用程序的状态变量。它是响应式的，当 state 发生变化时，依赖这些状态的组件会自动更新。
作用：state 提供了应用程序中所有组件可以共享的数据源。通过将状态集中存储在 state 中，可以方便地管理应用的全局状态。

mutations（突变）
含义：mutations 是 Vuex 中唯一允许更新应用状态的方法。它们是同步函数，用于对 state 进行同步修改。
作用：mutations 提供了修改 state 的机制。每个 mutation 都有一个字符串类型的事件类型（type）和一个回调函数（handler），在回调函数中实际进行状态的改变。通过调用 commit 方法并传入 mutation 的类型来触发相应的 mutation。

actions（动作）
含义：actions 类似于 mutations，但用于处理异步操作。actions 可以包含任意异步代码，并在操作完成后通过调用 mutations 来更新状态。
作用：actions 提供了处理异步操作（如 API 请求）的能力。它们可以触发 mutations，但不能直接修改 state。通过调用 dispatch 方法并传入 action 的类型来触发相应的 action。

getters（获取器）
含义：getters 是 Vuex 中用于从 state 中派生出一些状态或计算属性的函数。它们类似于 Vue 组件中的计算属性，但可以在全局范围内使用。
作用：getters 提供了对 state 的计算或过滤功能，从而可以基于 state 派生出新的状态或数据。getters 可以接受额外的参数，并返回派生出的新状态或数据。在组件中，可以通过 this.$store.getters.getterName 或 mapGetters 辅助函数来访问 getters。

导入到 App.vue使用

import store from './store'
app.use(store); 

使用vuex

现在，可以在 Vue 组件中使用 Vuex 状态、提交 mutations 和调用 actions
实例代码：

<template>  <div>  <p>Count: {{ count }}</p>  <p>Double Count: {{ doubleCount }}</p>  <p>User Name: {{ userName }}</p>  <p>User Age: {{ userAge }}</p>  <button @click="incrementCount">Increment</button>  <button @click="asyncIncrementCount">Async Increment</button>  <button @click="updateUserName('Jane Doe')">Update User Name</button>  </div>  
</template>  <script>  
import { computed } from 'vue';  
import { useStore } from 'vuex';  export default {  setup() {  const store = useStore();  const count = computed(() => store.state.count);  const doubleCount = computed(() => store.getters.doubleCount);  const userName = computed(() => store.state.user.name);  const userAge = computed(() => store.getters.userAge);  const incrementCount = () => {  store.commit('increment');  };  const asyncIncrementCount = async () => {  await store.dispatch('asyncIncrement');  };  const updateUserName = (newName) => {  store.dispatch('updateUserNameAction', newName);  };  return {  count,  doubleCount,  userName,  userAge,  incrementCount,  asyncIncrementCount,  updateUserName  };  }  
};  
</script>

然后就能成功的实现vuex数据共享了