18.4.1 创建store-Vue.js从入门到精通(四)

当前位置:　首页>> 技术小册>> Vue.js从入门到精通(四)

### 18.4.1 创建Store

在Vue.js应用程序中，随着项目的规模扩大，组件间的状态管理往往会变得复杂且难以维护。Vuex作为一个专为Vue.js应用程序开发的状态管理模式和库，应运而生，它集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。在本章节“18.4.1 创建Store”中，我们将详细探讨如何在Vue.js项目中设置和使用Vuex来管理状态。

#### 1. 理解Vuex的基本概念

在深入创建Store之前，理解Vuex的几个核心概念是至关重要的：

- **State**：Vuex管理的状态对象。它响应式地驱动Vue组件的渲染。
- **Getters**：允许组件从Store中派生一些状态，类似于计算属性。
- **Mutations**：更改Vuex中state的唯一途径。它们是同步函数，用于执行实际的状态变更。
- **Actions**：可以包含任意异步操作，Action通过提交mutation来变更状态。
- **Modules**：允许将单一的Store分割成模块（module），每个模块拥有自己的state、mutation、action、getter。

#### 2. 安装Vuex

在开始创建Store之前，你需要在你的Vue.js项目中安装Vuex。如果你使用的是Vue CLI创建的项目，可以通过npm或yarn来安装Vuex：

```bash
npm install vuex --save
# 或者
yarn add vuex
```

#### 3. 创建Store

安装Vuex后，你可以在项目的src目录下创建一个新的文件夹`store`，并在其中创建一个名为`index.js`的文件，这个文件将用于配置和导出Vuex的Store。

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

Vue.use(Vuex);

// 定义state
const state = {
  count: 0
};

// 定义mutations
const mutations = {
  increment(state) {
    state.count++;
  },
  decrement(state) {
    state.count--;
  }
};

// 定义actions
const actions = {
  incrementIfOdd({ commit, state }) {
    if ((state.count % 2) === 1) {
      commit('increment');
    }
  },
  incrementAsync({ commit }) {
    setTimeout(() => {
      commit('increment');
    }, 1000);
  }
};

// 定义getters
const getters = {
  evenOrOdd: state => state.count % 2 === 0 ? 'even' : 'odd'
};

// 创建并导出store
export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
});
```

在这个例子中，我们定义了一个简单的State，其中包含了一个`count`属性，初始值为0。我们还定义了两种Mutation来增减这个`count`，以及两个Action，其中一个`incrementIfOdd`是条件性地提交mutation，另一个`incrementAsync`是异步操作后提交mutation。最后，我们定义了一个Getter`evenOrOdd`来派生`count`的奇偶性状态。

#### 4. 在Vue实例中使用Store

现在，你已经创建了一个Vuex Store，接下来需要在Vue实例中通过`store`选项来引入它，这样你的Vue组件就可以访问这个Store了。

如果你使用的是Vue CLI创建的Vue项目，通常在`src/main.js`或`src/main.ts`文件中进行全局注册：

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

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

#### 5. 在组件中使用Vuex

在Vue组件中，你可以通过`this.$store`来访问store。但更常见和推荐的做法是使用`mapState`、`mapGetters`、`mapMutations`、`mapActions`这些辅助函数来映射State、Getters、Mutations和Actions，从而让你的组件代码更加简洁。

**示例：在组件中使用`mapState`和`mapMutations`**

```vue
<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

export default {
  computed: {
    ...mapState([
      'count'
    ])
  },
  methods: {
    ...mapMutations([
      'increment',
      'decrement'
    ])
  }
}
</script>
```

在这个组件中，我们使用了`mapState`来映射`count`状态到组件的计算属性，这样组件模板中就可以直接通过`{{ count }}`来访问它。同时，我们也通过`mapMutations`映射了`increment`和`decrement`两个mutation到组件的方法，从而可以在模板中通过`@click`事件直接调用它们。

#### 6. Vuex模块化

随着项目的复杂度增加，你可能会希望将Vuex的Store分割成多个模块来管理不同的功能或组件的状态。Vuex允许你以模块化的方式组织store，每个模块可以拥有自己独立的state、mutation、action、getter等。

**示例：模块化Store**

```javascript
// src/store/modules/user.js
export default {
  namespaced: true,
  state: () => ({
    name: 'John Doe'
  }),
  mutations: {
    setName(state, name) {
      state.name = name;
    }
  },
  actions: {
    updateName({ commit }, name) {
      commit('setName', name);
    }
  },
  getters: {
    nameWithGreeting: (state) => `Hello, ${state.name}!`
  }
}

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

Vue.use(Vuex);

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

在这个例子中，我们创建了一个名为`user`的模块，并将其包含在一个更大的Store中。注意，每个模块都可以设置`namespaced`选项来启用命名空间，这是为了防止不同模块之间的getters、mutations和actions名称冲突。

#### 结语

通过本章节的学习，你应该已经掌握了如何在Vue.js项目中创建和使用Vuex Store来管理状态。Vuex为Vue.js应用提供了一种强大且灵活的状态管理方案，能够帮助你构建更加复杂和可维护的应用程序。记得在实际项目中根据应用的需求灵活运用Vuex的各种特性，比如模块化、getters、actions等，来优化你的状态管理逻辑。

该分类下的相关小册推荐：

Vue面试指南

vuejs组件实例与底层原理精讲

TypeScript和Vue从入门到精通(二)

TypeScript和Vue从入门到精通(五)

Vue原理与源码解析

移动端开发指南

Vue3技术解密

Vue.js从入门到精通(一)

TypeScript和Vue从入门到精通(一)

vue项目构建基础入门与实战

TypeScript和Vue从入门到精通(四)

TypeScript和Vue从入门到精通(三)