vue的js中如何获取vuex

在Vue的JS中获取Vuex可以通过以下几种方法：1、通过this.$store访问Vuex实例，2、在独立的JavaScript文件中导入Vuex实例，3、通过Vuex的mapState、mapGetters、mapActions、mapMutations等辅助函数来访问和操作Vuex的状态和方法。下面将详细介绍通过this.$store访问Vuex实例的方法。

通过this.$store访问Vuex实例是最常见的方式，尤其是在组件内部。Vue组件实例被创建后，Vuex实例会被挂载到组件实例的$store属性上，因此可以通过this.$store来访问Vuex实例中的状态、getters、actions和mutations。

一、通过this.$store访问Vuex实例

在Vue组件中，可以通过this.$store直接访问Vuex实例。以下是具体步骤：

1. 创建Vuex Store。
2. 在Vue组件中访问Vuex实例。

步骤1：创建Vuex Store

首先，创建一个新的Vuex Store实例，并在其中定义状态、getters、actions和mutations。例如：

// store.js

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    getCount: state => state.count
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  }
});
export default store;

步骤2：在Vue组件中访问Vuex实例

在创建好的Vuex Store实例之后，可以在Vue组件中通过this.$store访问它。例如：

<template>

  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>
<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment');
    },
    incrementAsync() {
      this.$store.dispatch('incrementAsync');
    }
  }
};
</script>

二、在独立的JavaScript文件中导入Vuex实例

有时需要在非组件文件中访问Vuex Store，可以在这些文件中导入Vuex实例。例如：

// someFile.js

import store from './store';
// 获取当前状态
const count = store.state.count;
// 提交mutation
store.commit('increment');
// 分发action
store.dispatch('incrementAsync');

三、通过Vuex的辅助函数访问和操作Vuex的状态和方法

Vuex提供了一些辅助函数，用于简化在组件中访问和操作Vuex状态和方法的代码。这些辅助函数包括mapState、mapGetters、mapActions和mapMutations。例如：

<template>

  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>
<script>
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex';
export default {
  computed: {
    ...mapState(['count']),
    ...mapGetters(['getCount'])
  },
  methods: {
    ...mapMutations(['increment']),
    ...mapActions(['incrementAsync'])
  }
};
</script>

通过这些辅助函数，可以简化代码，并使其更加易读和维护。

四、Vuex辅助函数的详细介绍

mapState

mapState函数用于将Vuex状态映射到组件的computed属性。例如：

computed: {

  ...mapState(['count'])
}

这样，组件的count属性将直接映射到Vuex Store中的count状态。

mapGetters

mapGetters函数用于将Vuex的getters映射到组件的computed属性。例如：

computed: {

  ...mapGetters(['getCount'])
}

这样，组件的getCount属性将直接映射到Vuex Store中的getCount getter。

mapMutations

mapMutations函数用于将Vuex的mutations映射到组件的methods属性。例如：

methods: {

  ...mapMutations(['increment'])
}

这样，组件的increment方法将直接映射到Vuex Store中的increment mutation。

mapActions

mapActions函数用于将Vuex的actions映射到组件的methods属性。例如：

methods: {

  ...mapActions(['incrementAsync'])
}

这样，组件的incrementAsync方法将直接映射到Vuex Store中的incrementAsync action。

五、实例说明

假设我们有一个待办事项列表应用，我们希望在组件中访问和操作Vuex Store中的状态和方法。以下是完整的示例代码：

// store.js

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
  state: {
    todos: []
  },
  getters: {
    allTodos: state => state.todos
  },
  mutations: {
    addTodo(state, todo) {
      state.todos.push(todo);
    },
    removeTodo(state, index) {
      state.todos.splice(index, 1);
    }
  },
  actions: {
    addTodoAsync({ commit }, todo) {
      setTimeout(() => {
        commit('addTodo', todo);
      }, 1000);
    },
    removeTodoAsync({ commit }, index) {
      setTimeout(() => {
        commit('removeTodo', index);
      }, 1000);
    }
  }
});
export default store;

在组件中：

<template>

  <div>
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        {{ todo }}
        <button @click="removeTodoAsync(index)">Remove</button>
      </li>
    </ul>
    <input v-model="newTodo" placeholder="Add a todo" />
    <button @click="addTodoAsync(newTodo)">Add</button>
  </div>
</template>
<script>
import { mapState, mapGetters, mapActions } from 'vuex';
export default {
  data() {
    return {
      newTodo: ''
    };
  },
  computed: {
    ...mapState(['todos']),
    ...mapGetters(['allTodos'])
  },
  methods: {
    ...mapActions(['addTodoAsync', 'removeTodoAsync'])
  }
};
</script>

通过上述代码，我们可以在组件中访问和操作Vuex Store中的状态和方法，构建一个完整的待办事项列表应用。

总结

在Vue的JS中获取Vuex有多种方法，最常见的是通过this.$store访问Vuex实例。此外，还可以在独立的JavaScript文件中导入Vuex实例，或通过Vuex的mapState、mapGetters、mapActions、mapMutations等辅助函数来访问和操作Vuex的状态和方法。选择适合的方法可以简化代码，并使其更加易读和维护。无论选择哪种方法，都需要确保正确配置和使用Vuex实例，以充分发挥其状态管理的优势。

相关问答FAQs：

1. 如何在Vue的组件中获取Vuex的状态？

在Vue的组件中获取Vuex的状态非常简单。首先，确保你的Vue项目已经安装了Vuex。然后，在你的组件中引入Vuex，并使用mapState方法将需要的状态映射到组件的计算属性中。

例如，假设你的Vuex store中有一个user模块，其中包含一个name状态。你可以按照以下步骤在组件中获取这个状态：

首先，在组件中引入Vuex：

import { mapState } from 'vuex';

然后，在组件的computed属性中使用mapState方法将状态映射到组件中：

computed: {
  ...mapState('user', ['name'])
}

现在，你可以在组件中使用this.name来访问user模块中的name状态。

2. 如何在Vue的组件中修改Vuex的状态？

要修改Vuex的状态，你需要使用Vuex提供的mutations。mutations是一种用于修改Vuex的状态的方法。在Vue组件中，你可以使用mapMutations方法将mutations映射到组件的方法中。

假设你的Vuex store中有一个user模块，其中包含一个name状态和一个setName的mutation。你可以按照以下步骤在组件中修改这个状态：

首先，在组件中引入Vuex：

import { mapMutations } from 'vuex';

然后，在组件的methods属性中使用mapMutations方法将setName映射到组件中：

methods: {
  ...mapMutations('user', ['setName'])
}

现在，你可以在组件中使用this.setName('新的名字')来调用setNamemutation并修改name状态。

3. 如何在Vue的组件中触发Vuex的actions？

在Vue的组件中触发Vuex的actions同样很简单。首先，确保你的Vuex store中有一个actions模块，并在其中定义了需要触发的actions。然后，在组件中引入Vuex，并使用mapActions方法将需要触发的actions映射到组件的方法中。

假设你的Vuex store中有一个user模块，其中包含一个fetchUser的action。你可以按照以下步骤在组件中触发这个action：

首先，在组件中引入Vuex：

import { mapActions } from 'vuex';

然后，在组件的methods属性中使用mapActions方法将fetchUser映射到组件中：

methods: {
  ...mapActions('user', ['fetchUser'])
}

现在，你可以在组件中使用this.fetchUser()来触发fetchUseraction。你还可以传递参数给fetchUseraction，例如this.fetchUser('userId')。

以上是在Vue的JavaScript中获取、修改和触发Vuex的常见操作。希望这些解答能够帮助你更好地理解和应用Vuex。