vue中的store怎么使用

发布时间：2022-02-25 16:18:44 作者：iii
来源：亿速云阅读：839

Vue中的Store怎么使用

在Vue.js中，Store是Vuex的核心概念之一，用于管理应用的状态（state）。Vuex是一个专为Vue.js应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。本文将详细介绍如何在Vue中使用Store，包括如何创建、配置和使用Store。

1. Vuex简介

Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex的核心概念包括：

State：驱动应用的数据源。
Getter：从Store中获取状态的计算属性。
Mutation：更改Store中状态的唯一方法。
Action：提交Mutation，可以包含任意异步操作。
Module：将Store分割成模块，每个模块拥有自己的State、Getter、Mutation和Action。

2. 创建Store

在Vue项目中使用Vuex，首先需要安装Vuex。如果你使用的是Vue CLI创建的项目，可以通过以下命令安装Vuex：

npm install vuex --save

安装完成后，可以在项目中创建一个Store。通常，我们会将Store放在src/store目录下。首先，创建一个index.js文件：

// src/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
});

在这个例子中，我们创建了一个简单的Store，包含一个state对象、一个mutation、一个action和一个getter。

3. 配置Store

创建好Store后，需要在Vue实例中配置它。通常，我们会在src/main.js中进行配置：

// src/main.js
import Vue from 'vue';
import App from './App.vue';
import store from './store';

Vue.config.productionTip = false;

new Vue({
  store,
  render: h => h(App),
}).$mount('#app');

通过将Store实例传递给Vue实例的store选项，Store将被注入到所有子组件中，并且可以通过this.$store访问。

4. 使用Store

4.1 访问State

在组件中访问Store中的状态，可以通过this.$store.state来获取。例如，在一个组件中显示count的值：

<template>
  <div>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  }
}
</script>

4.2 提交Mutation

更改Store中的状态的唯一方法是提交Mutation。在组件中，可以通过this.$store.commit来提交Mutation。例如，在一个按钮点击时增加count的值：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment');
    }
  }
}
</script>

4.3 分发Action

Action类似于Mutation，不同之处在于：

Action提交的是Mutation，而不是直接变更状态。
Action可以包含任意异步操作。

在组件中，可以通过this.$store.dispatch来分发Action。例如，在一个按钮点击时异步增加count的值：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    incrementAsync() {
      this.$store.dispatch('increment');
    }
  }
}
</script>

4.4 使用Getter

Getter用于从Store中获取状态的计算属性。在组件中，可以通过this.$store.getters来访问Getter。例如，显示count的两倍值：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    },
    doubleCount() {
      return this.$store.getters.doubleCount;
    }
  }
}
</script>

5. 模块化Store

随着应用规模的增大，Store可能会变得非常臃肿。为了应对这种情况，Vuex允许我们将Store分割成模块（Module）。每个模块拥有自己的State、Getter、Mutation和Action。

5.1 创建模块

首先，创建一个模块文件counter.js：

// src/store/modules/counter.js
const state = {
  count: 0
};

const mutations = {
  increment(state) {
    state.count++;
  }
};

const actions = {
  increment({ commit }) {
    commit('increment');
  }
};

const getters = {
  doubleCount(state) {
    return state.count * 2;
  }
};

export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
};

5.2 注册模块

在src/store/index.js中注册模块：

// src/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import counter from './modules/counter';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    counter
  }
});

5.3 在组件中使用模块

在组件中使用模块时，可以通过this.$store.state.moduleName来访问模块的状态，通过this.$store.commit('moduleName/mutationName')来提交模块的Mutation，通过this.$store.dispatch('moduleName/actionName')来分发模块的Action，通过this.$store.getters['moduleName/getterName']来访问模块的Getter。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.counter.count;
    },
    doubleCount() {
      return this.$store.getters['counter/doubleCount'];
    }
  },
  methods: {
    increment() {
      this.$store.commit('counter/increment');
    },
    incrementAsync() {
      this.$store.dispatch('counter/increment');
    }
  }
}
</script>

6. 总结

Vuex的Store是Vue.js应用中管理状态的核心工具。通过集中式存储管理应用的所有组件的状态，Vuex使得状态管理更加可预测和易于维护。本文介绍了如何创建、配置和使用Store，包括如何访问State、提交Mutation、分发Action、使用Getter以及模块化Store。希望本文能帮助你更好地理解和使用Vuex中的Store。