vuex中的5个属性使用方法举例讲解

下面是 "vuex中的5个属性使用方法举例讲解" 的详细攻略：

1. State

State 是 Vuex 存储数据的地方，类似于组件中的 data。通过处于 Store 对象中的 state 选项来定义，我们可以在模块内或组件中直接通过 this.$store.state 进行访问。

下面是一个 State 的示例，用来存储当前文章列表：

// store.js
export default new Vuex.Store({
  state: {
    articleList: []
  },
  // other options...
})

当我们需要访问 articleList 时，可以在组件中使用：this.$store.state.articleList 进行读取。

// ArticleList.vue
export default {
  created() {
    console.log(this.$store.state.articleList)
  }
}

2. Getter

当组件需要根据 State 计算得到一些信息时，我们可以使用 Getter。类似于 State，通过 Store 对象中的 getters 选项来定义。在组件中，我们可以通过 this.$store.getters 来访问它们。

下面是一个 Getter 的示例，用来计算当前文章总数：

// store.js
export default new Vuex.Store({
  state: {
    articleList: []
  },
  getters: {
    articleCount(state) {
      return state.articleList.length
    }
  },
  // other options...
})

在组件中，我们可以使用 this.$store.getters.articleCount 来访问计算得到的文章总数：

// ArticleList.vue
export default {
  computed: {
    articleCount() {
      return this.$store.getters.articleCount
    }
  }
}

3. Mutation

当我们需要修改 State 中的数据时，使用 Mutation。它提供了一种方法来保证状态的一致性，因为它们永远是同步的。类似于 State，通过 Store 对象中的 mutations 选项来定义。我们可以在组件中通过 this.$store.commit 来调用 Mutation。

下面是一个 Mutation 的示例，用来添加一篇新文章到文章列表中：

// store.js
export default new Vuex.Store({
  state: {
    articleList: []
  },
  mutations: {
    addArticle(state, article) {
      state.articleList.push(article)
    }
  },
  // other options...
})

在组件中，我们可以使用 this.$store.commit 提交 Mutation：

// AddArticle.vue
export default {
  methods: {
    addArticle(article) {
      this.$store.commit('addArticle', article)
    }
  }
}

4. Action

与 Mutation 类似，Action 也可以用来修改 State 中的数据。但是，Action 可以是异步的。因此，我们可以在 Action 中执行一些异步操作，例如从服务器中获取数据。类似于 State 和 Mutation，通过 Store 对象中的 actions 选项来定义。我们可以在组件中通过 this.$store.dispatch 来调用 Action。

下面是一个 Action 的示例，用来从服务器中获取一篇新文章然后添加到文章列表中：

// store.js
export default new Vuex.Store({
  state: {
    articleList: []
  },
  mutations: {
    addArticle(state, article) {
      state.articleList.push(article)
    }
  },
  actions: {
    addNewArticle({ commit }, payload) {
      return api.get('/article/' + payload.id)
        .then(response => {
          commit('addArticle', response.data)
        })
    }
  },
  // other options...
})

在组件中，我们可以使用 this.$store.dispatch 来触发 Action 的执行：

// AddArticle.vue
export default {
  methods: {
    addNewArticle(id) {
      this.$store.dispatch('addNewArticle', { id: id })
    }
  }
}

5. Module

当我们的应用越来越复杂时，State、Mutation、Getter 和 Action 的数量会越来越多，导致 Store 对象变得难以维护。在这种情况下，我们可以使用 Module 将 Store 拆分成多个模块。每个模块具有自己的 State、Mutation、Getter 和 Action 属性。我们可以在组件中使用 this.$store[name] 来访问模块。

下面是一个 Module 的示例，用来管理文章和用户：

// store.js
export default new Vuex.Store({
  modules: {
    article: {
      state: { /* ... */ },
      mutations: { /* ... */ },
      getters: { /* ... */ },
      actions: { /* ... */ }
    },
    user: {
      state: { /* ... */ },
      mutations: { /* ... */ },
      getters: { /* ... */ },
      actions: { /* ... */ }
    }
  },
  // other options...
})

在组件中，我们可以使用以下方法来访问模块：

// ArticleList.vue
export default {
  computed: {
    articleCount() {
      return this.$store.article.getters.articleCount
    }
  }
}

// AddArticle.vue
export default {
  methods: {
    addNewArticle(id) {
      this.$store.article.dispatch('addNewArticle', { id: id })
    }
  }
}