Vuex 学习1 - 开始

开始

每一个 Vuex 应用的核心就是 store （仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象由以下两个不同点：

1. Vuex 的状态存储是响应式的。当 Vuex 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会得到高效更新。
2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一路径就是显示地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

最简单的 Store

在使用 vue-cli 默认创建的 vue-app 中，为了能够使用 vuex，我们必须安装 vuex：

yarn add vuex
// or
npm install vuex -S

安装完成之后，我们在 component 文件夹中创建一个新的文件夹，并命名为 store，创建新文件 store.js。为了将 vuex 整合进 vue-app 应用中，我们需要使用 Vue.use()，来使用 vuex 插件：

import Vue from 'vue';
import Vuex from ' vuex';
Vue.use(Vuex);

const state = {
    count: 1
};

const mutations = {
    add (state) {
        state.count ++;
    },
    reduce (state) {
        state.count --;
    }
}

// 将其 export 出去
export default new Vuex.Store({
   state,
    mutations,
});

这样，我们就编写好了一个存储公用状态的仓库，我们接下来在 vue 的单页面应用中引入 store 并配置进 vue 实例中即可：

<template>
    <div>
        <h2>{{ msg }}</h2>
        <hr />
        <h3>{{ $store.state.count }}</h3>
        <p><button @click="$store.commit('add')">增加</button></p>
        <p><button @click="$store.commit('reduce')">减少</button></p>
    </div>
</template>

<script>
import store from '@/vuex/store';
export default {
    name: 'Count',
    data() {
        return {
            msg: 'Hello Vuex',
        }
    },
    store,
}
</script>

以下是结果：

需要注意的是，里面的状态是这个单页应用公用的。