Vue全局数据管理示例详解

Vue是一个流行的JavaScript框架，用于构建交互式的Web应用程序。在Vue中，数据管理是非常重要的一个方面。Vue提供了不同的方式来管理各种不同类型的数据，包括本地数据、API请求和服务器数据等。

Vuex

在Vue中，我们可以使用Vuex来管理全局数据。Vuex是一个Vue.js专用的状态管理库，它提供了一种集中存储共享状态数据的方案。Vuex利用单向数据流的架构，使得我们能够追踪应用程序的状态变化和响应。

Vuex提供了五种核心部分：

1. State（状态）：存储应用程序级别的状态
2. Getters（计算属性）：派生状态数据
3. Mutations（变更）：修改状态
4. Actions（动作）：异步修改状态
5. Modules（模块）：将store分割成更小的模块

通过使用Vuex，我们可以轻松地在整个应用程序中共享状态，而不必通过 props 和事件传递数据。

示例1：数据同步

下面是一个简单的TODO应用程序。使用Vuex来管理TODO列表数据，并使用mutatations将数据更改反映到视图中。

//store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: 'Learn Vue', done: true },
      { id: 2, text: 'Learn Vuex', done: false }
    ]
  },
  mutations: {
    setTodoDone (state, id) {
      const todo = state.todos.find(todo => todo.id === id)
      todo.done = true
    }
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

<!-- App.vue -->
<template>
  <div>
    <h2>TODOs</h2>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        <input type="checkbox" @change="setTodoDone(todo.id)" :checked="todo.done">
        {{ todo.text }}
      </li>
    </ul>
    <h2>Done TODOS</h2>
    <ul>
      <li v-for="todo in doneTodos" :key="todo.id">{{ todo.text }}</li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'

export default {
  computed: {
    ...mapState(['todos']),
    ...mapGetters(['doneTodos'])
  },
  methods: {
    setTodoDone (id) {
      this.$store.commit('setTodoDone', id)
    }
  }
}
</script>

在上面的示例中，我们在store中定义了一个todos数组，包含了两个todo项。我们还定义了一个setter(mutations)，使用ID来更新todo项的状态。我们还定义了一个getter，返回已完成的todo项数组。

在组件中，使用mapState和mapGetters来映射到store中定义的todos和doneTodos方法。我们使用通过setTodoDone方法来更新todo项的状态，使用$store.commit方法来触发更新视图。

示例2：数据异步请求

下面是一个更复杂的例子，涉及到用户注册和登录。在这个例子中，我们使用Vuex来管理用户数据和API请求。

//store.js
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

const API_ROOT = 'https://api.example.com/'

export const store = new Vuex.Store({
  state: {
    user: null
  },
  mutations: {
    setUser (state, user) {
      state.user = user
    }
  },
  actions: {
    async register ({ commit }, { email, password }) {
      const response = await axios.post(`${API_ROOT}/register`, { email, password })
      commit('setUser', response.data.user)
      return response.data.user
    },
    async login ({ commit }, { email, password }) {
      const response = await axios.post(`${API_ROOT}/login`, { email, password })
      commit('setUser', response.data.user)
      return response.data.user
    },
    async logout ({ commit }) {
      await axios.post(`${API_ROOT}/logout`)
      commit('setUser', null)
    }
  },
  getters: {
    isLoggedIn: state => !!state.user
  }
})

<!-- App.vue -->
<template>
  <div>
    <div v-if="isLoggedIn">
      Logged in as {{ user.email }}
      <button @click="logout">Logout</button>
    </div>
    <div v-else>
      <form @submit.prevent="register">
        <h2>Sign up</h2>
        <div>
          <label>Email</label>
          <input type="email" v-model="email">
        </div>
        <div>
          <label>Password</label>
          <input type="password" v-model="password">
        </div>
        <button>Register</button>
      </form>
      <hr>
      <form @submit.prevent="login">
        <h2>Sign in</h2>
        <div>
          <label>Email</label>
          <input type="email" v-model="email">
        </div>
        <div>
          <label>Password</label>
          <input type="password" v-model="password">
        </div>
        <button>Login</button>
      </form>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex'

export default {
  data: () => ({
    email: '',
    password: ''
  }),
  computed: {
    ...mapState(['user']),
    ...mapGetters(['isLoggedIn'])
  },
  methods: {
    ...mapActions(['register', 'login', 'logout'])
  }
}
</script>

在上面的示例中，我们在store中定义了一个user对象，该对象可以设置为null或一个包含用户信息的对象。此外，我们还定义了register、login和logout三个actions来处理API请求并更新store中的user对象。我们还定义了一个getter，用于检查用户是否已登录。

在组件中，使用mapState和mapGetters来映射到store中定义的user和 isLoggedIn方法。我们使用register、login和logout方法来处理API请求并触发更新视图。

结论

通过使用Vuex，在组件之间共享状态数据变得非常容易。我希望这些示例能够帮助您更好地理解如何在Vue应用程序中使用Vuex来管理数据。