方法一 – 使用文件分割

第一种方法，当然也是最简单的方法，涉及简单地获取各个 Vuex 部分（state、getter 等）的代码并将它们移动到自己的文件中。然后，这些文件可以由主 Vuex Store 导入并正常使用。让我们考虑一个简单的例子：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        name:"Lindy",
        favoriteColor: "blue",
        profession: "librarian"
    },
    mutations: {
    },
    actions: {
    },
    modules: {
    }
})

这是第 9 章 "使用 Vuex – 状态、获取器、操作和突变" 中的第一个练习，并且是一个只有三个状态值的存储。要将状态(state)迁移到新文件，您可以在 store 文件夹中创建一个名为 state.js 的新文件，并按如下所示进行设置：

export default {
    name: 'Lindy',
    favoriteColor: 'blue',
    profession: 'librarian'
}

然后，回到您的 store，修改它以导入(import)并使用代码：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

import state from './state.js';

export default new Vuex.Store({
    state,
    mutations: {
    },
    actions: {
    },
    modules: {
    }
})

虽然此示例最终包含更多行代码，但您可以看到我们如何开始将存储的不同部分分离到不同的文件中，以便更容易更新。让我们考虑一个稍微大一点的例子，再次采用第 9 章第二个练习中的早期工作，使用 Vuex – 状态(State)、获取器(Getters)、操作(Actions)和突变(Mutations)。这是原来的 store：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        firstName: "Lindy",
        lastName: "Roberthon"
    },
    getters: {
        name(state) {
            return state.firstName + ' ' + state.lastName;
        }
    },
    mutations: {
    },
    actions: {
    },
    modules: {
    }
})

此示例仅使用 state 值和 getter，但让我们将它们都移动到新文件中。首先，让我们将状态(state)移动到名为 state.js 的文件中：

export default {
    firstName: 'Lindy',
    lastName: 'Roberthon'
}

接下来，让我们将 getters 移至名为 getters.js 的文件中：

export default {
    name(state) {
        return state.firstName + ' ' + state.lastName;
    }
}

现在我们可以更新 store：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

import state from './state.js';
import getters from './getters.js';

export default new Vuex.Store({
    state,
    getters,
    mutations: {
    },
    actions: {
    },
    modules: {
    }
})

对突变(mutations)和操作(actions)应用相同类型的更新将遵循完全相同的模式，显然，您不必拆分所有内容。例如，您可以将状态值保留在主文件中，但只拆分函数（获取器(getters)、突变(mutations)和操作(actions)）。

练习11.01：使用文件分割

在本练习中，我们将在稍大的 Vue 存储中使用文件拆分。老实说，它根本不是很大，但我们将使用文件分割来处理状态(state)、获取器(getters)、突变(mutations)和操作(actions)。

要访问本练习的代码文件，请访问 https://packt.live/32uwiKB ：

生成一个新的 Vue 应用程序并添加 Vuex 支持。

修改默认 store 的 index.js 文件（位于 src/store/index.js）以导入我们将创建的代表 store 的四个文件：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

import state from './state.js';
import getters from './getters.js';
import mutations from './mutations.js';
import actions from './actions.js';

export default new Vuex.Store({
    state,
    getters,
    mutations,
    actions,
    modules: {
    }
})

编辑新的 state.js 文件以添加名字和姓氏的值、代表相关人员拥有的猫和狗数量的数字以及最喜欢的电影：
```
export default {
    firstName: 'Lindy',
    lastName: 'Roberthon',
    numCats: 5,
    numDogs: 1,
    favoriteFilm:''
}
```

添加一个 getter.js 文件，为全名和宠物总数定义一个 getter：

export default {
    name(state) {
        return state.firstName + ' ' +state.lastName
    },
    totalPets(state) {
        return state.numCats + state.numDogs
    }
}

接下来，添加一个 mutations.js 文件，用于添加猫和狗的数量，设置名字和姓氏，并添加最喜欢的电影：

export default {
    addCat(state) {
        state.numCats++;
    },
    addDog(state) {
        state.numDogs++;
    },
    setFirstName(state, name) {
        if(name !== '') state.firstName = name;
    },
    setLastName(state, name) {
        if(name !== '') state.lastName = name;
    },
    setFavoriteFilm(state, film) {
        if(film !== '') state.favoriteFilm = film;
    }
}

最后，添加 actions.js 来定义一个操作 updateFavouriteFilm。这将向 Star Wars API 发出网络请求，以确保仅允许新喜爱的电影是 Star Wars 电影：

export default {
    async updateFavoriteFilm(context, film) {
    try {
        let response = await fetch('https://swapi.dev/api/films?search='+encodeURIComponent(film));
        let data = await response.json();
        if(data.count === 1) context.commit('setFavoriteFilm', film);
        else console.log('Ignored setting non-Star Wars film '+film+' as favorite.');
    } catch(e) {
        console.error(e);
    }
    }
}

要查看其实际效果，请更新 src/App.vue 以访问 store 的各个部分。此步骤的唯一一点是让大家明白您使用 store 的方式不会改变：

<template>
    <div id="app">
        My first name is {{ $store.state.firstName }}.<br/>
        My full name is {{ $store.getters.name }}.<br/>
        I have this many pets - {{ $store.getters.totalPets }}.<br/>
        My favorite film is {{ $store.state.favoriteFilm }}.
    </div>
</template>

<script>
export default {
    name: 'app',
    created() {
        this.$store.dispatch('updateFavoriteFilm', 'A New Hope');
    }
}
</script>

前面的代码将生成如下输出：

Figure 1. Figure 11.1: Output from the newly organized store

您现在已经看到了一个（有点简单）使用文件分割来管理 Vuex 存储大小的示例。虽然功能与您之前看到的没有什么不同，但随着应用程序的增长，您可能会发现添加和修复变得更加容易。