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数据共享了