什么是 Vuex Store？

Question

Vuex Store 是 Vuex 中的基本对象。 包装 store 将应用程序的状态 在一个方便的对象中，让您可以访问强大的功能和模式，例如 mutations 和 getters。

创建商店

Vuex 导出一个 Store Class。 所以你可以使用 require() 在 Node.js 或 ESM中 import 引入 Vuex，并创建一个新 Store：

const Vuex = require('vuex');

// Equivalent:
import Vuex from 'vuex';

// Create a new store:
const store = new Vuex.Store({
  state: {
    count: 0
  }
});

你也可以通过一个 script 来自 CDN 的标签，例如 unpkg ：

<script src="https://unpkg.com/vuex/dist/vuex.js"></script>
<script>
  const store = new Vuex.Store({
    state: {
      count: 0
    }
  });
</script>

使用商店

您在 Node.js 中试验 Vuex 而根本不使用 Vue。 例如，以下是创建新商店并打印当前状态的方法。

const Vuex = require('vuex');

const store = new Vuex.Store({
  state: { count: 0 }
});

store.state; // { count: 0 }

修改 Vuex store 状态的规范方法是通过 mutation 。 你不应该直接修改 state 的值。下面是如何定义增加和减少 count 财产：

const Vuex = require('vuex');

const store = new Vuex.Store({
  state: { count: 0 },
  mutations: {
    increment: store => store.count += 1,
    decrement: store => store.count -= 1
  }
});

store.state; // { count: 0 }

store.commit('increment');
store.state; // { count: 1 }

store.commit('decrement');
store.state; // { count: 0 }

Although you can access a Vuex store's state directly with store.state, you typically wouldn't do that in a Vue app. That's because accessing store.state directly doesn't tie in to Vue's reactivity properly. Instead, you would define a Vuex getter.

const Vuex = require('vuex');

const store = new Vuex.Store({
  state: { count: 0 },
  getters: {
    count: store => store.count
  },
  mutations: {
    increment: store => store.count += 1,
    decrement: store => store.count -= 1
  }
});

store.getters.count; // 0

store.commit('increment');
store.getters.count; // 1

将 Store 添加到您的应用程序

为了让你的 Vue 应用程序使用 Vuex，你需要做两件事：

1. 称呼 Vue.use(Vuex) 在你定义你的应用程序之前。
2. 创建一个 store 并将其传递给 Vue 构造函数。 例如， new Vue({ store, computed, template })

例如，下面是如何连接 Vue 实例以使用 count Store：

  Vue.use(Vuex);

  const store = new Vuex.Store({
    state: { count: 0 },
    getters: {
      count: state => state.count
    },
    mutations: {
      increment: store => store.count += 1,
      decrement: store => store.count -= 1
    }
  });

  const app = new Vue({
    store,
    computed: {
      count: function() {
        return this.$store.getters.count;
      }
    },
    template: `
      <div>
        <h1>{{count}}</h1>
        <button v-on:click="$store.commit('increment')">
          Increment
        </button>
        <button v-on:click="$store.commit('decrement')">
          Decrement
        </button>
      </div>
    `
  });