如何从Vuex Store数组中获取单个项目并引用存储状态

Hey there! Glad to hear you're making solid progress with Vuex—getting your project list stored and displayed on the homepage is such a great milestone. Let's walk through exactly how to pull that specific project 1 from your Vuex state on its dedicated page, plus how to safely interact with the stored data.

First: Make Sure Your State Has Unique Identifiers #

First off, I assume your Vuex state's projects array has items with a unique field that matches your route (like a slug or id). For example:

// store/index.js
const state = {
  projects: [
    { id: 1, slug: 'project-1', name: 'Project 1', description: '...' },
    { id: 2, slug: 'project-2', name: 'Project 2', description: '...' },
    { id: 3, slug: 'project-3', name: 'Project 3', description: '...' }
  ]
}

This unique slug (or id) will let us match the route www.mywebsite.com/project-1 to the correct item in the state.

Step 1: Add a Vuex Getter to Fetch the Specific Project #

Instead of searching the array directly in your component, using a Vuex getter is cleaner and reusable across your app. Add this to your store's getters section:

// store/index.js
const getters = {
  // A getter that takes a slug and returns the matching project
  getProjectBySlug: (state) => (slug) => {
    return state.projects.find(project => project.slug === slug)
  }
}

Step 2: Fetch the Project in Your Detail Component #

Now, on your project detail page component, you'll grab the slug from the route parameters and use the getter to pull the matching project.

If you're using Options API (Vue 2 or Vue 3 with Options): #

<template>
  <div v-if="project">
    <h1>{{ project.name }}</h1>
    <p>{{ project.description }}</p>
    <!-- Add your project content here -->
  </div>
  <div v-else>Loading project...</div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    // Map the getter to your component
    ...mapGetters(['getProjectBySlug']),
    // Get the project using the route's slug parameter
    project() {
      const projectSlug = this.$route.params.slug
      return this.getProjectBySlug(projectSlug)
    }
  }
}
</script>

If you're using Composition API (Vue 3): #

<template>
  <div v-if="project">
    <h1>{{ project.name }}</h1>
    <p>{{ project.description }}</p>
  </div>
  <div v-else>Loading project...</div>
</template>

<script setup>
import { computed } from 'vue'
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'

const store = useStore()
const route = useRoute()

// Compute the project based on the route's slug
const project = computed(() => {
  const slug = route.params.slug
  return store.getters.getProjectBySlug(slug)
})
</script>

Step 3: Safely Modify the Stored Project State #

If you need to update the project (like editing its name or description), never modify the Vuex state directly. Instead, use mutations (for sync changes) and actions (for async changes like API calls).

Add Mutation & Action to Your Store: #

// store/index.js
const mutations = {
  UPDATE_PROJECT: (state, updatedProject) => {
    // Find the index of the project to update
    const projectIndex = state.projects.findIndex(p => p.slug === updatedProject.slug)
    if (projectIndex !== -1) {
      // Replace the old project with the updated one
      state.projects.splice(projectIndex, 1, updatedProject)
    }
  }
}

const actions = {
  // Use an action if you need to call an API first (async)
  updateProject({ commit }, updatedProject) {
    // Example: Call your backend API to save changes first
    // await fetch(`/api/projects/${updatedProject.slug}`, {
    //   method: 'PUT',
    //   body: JSON.stringify(updatedProject)
    // })
    
    // Then commit the mutation to update the state
    commit('UPDATE_PROJECT', updatedProject)
  }
}

Call the Action from Your Component: #

Options API:

<script>
export default {
  // ... other code
  methods: {
    saveChanges() {
      // Create an updated project object
      const updatedProject = {
        ...this.project,
        description: 'This is my updated project description!'
      }
      // Dispatch the action to update the state
      this.$store.dispatch('updateProject', updatedProject)
    }
  }
}
</script>

Composition API:

<script setup>
// ... other code
const saveChanges = () => {
  const updatedProject = {
    ...project.value,
    description: 'This is my updated project description!'
  }
  store.dispatch('updateProject', updatedProject)
}
</script>

Quick Notes to Keep in Mind #

• Unique Identifiers: Always use a unique field (slug, id) to match projects to routes—this avoids confusion if project names change.
• Loading States: If your projects are loaded asynchronously (e.g., from an API), add a loading flag in your state to handle the "loading" state in components.
• Vuex Rules: Remember the golden rule—only mutations can modify state, actions are for async logic or batching changes.

内容的提问来源于stack exchange，提问作者KJParker