序言

每一个 Vuex 运用的关键便是 store（库房）。store大部分便是一个器皿，它包括着你的运用中绝大多数的情况 (state)。Vuex 和单纯性的全局性目标有下列二点不一样：

1. Vuex 的情况储存是响应式网站的。当 Vue 部件从 store 中载入情况的情况下，若 store 中的情况产生变化，那麼相对应的部件也会相对应地获得高效率升级。
2. 你不能立即更改 store 中的情况。更改 store 中的情况的唯一方式便是显式地递交 (commit) mutation。那样促使我们可以便捷地追踪每一个情况的转变，进而使我们可以完成一些专用工具协助大家能够更好地掌握大家的运用。
    

Vuex的安裝

安裝根据NPM指令：

npm install vuex --save

在一个模块化设计的装包系统软件中，您务必显式地根据 Vue.use() 来安裝 Vuex：

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

Vue.use(Vuex)

如果我们应用vue-cli建立新项目并挑选配备了Vuex，那麼新项目会全自动给大家配备好这种
 

Vuex的简易实例

安裝 Vuex 以后，大家必须 在某一地区储放大家的Vuex编码
这儿大家先建立一个文件夹名称store，而且在这其中建立一个index.js文档，在文档中载入以下编码

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    counter: 1000,
  },
  mutations: {
    increment(state) {
      state.counter  ;
    },
    decrement(state) {
      state.counter--;
    },
  },
});

次之，大家让全部的Vue部件都能够应用这一store目标，赶到main.js文档中，导进store目标，而且放到new Vue中，那样别的Vue部件中，大家就可以根据this.$store的方法，获得到这一store目标

import Vue from "vue";
import App from "./App.vue";
import store from "./store";

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

随后在App.vue中载入以下编码：

<template>
  <div >
    <h2>{{ $store.state.counter }}</h2>
    <button @click="addMethod"> </button>
    <button @click="reduce">-</button>
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    addMethod() {
      this.$store.commit("increment");
    },
    reduce() {
      this.$store.commit("decrement");
    },
  },
};
</script>
<style lang="scss"></style>

Vuex应用流程汇总

• 1.获取一个公共性的store目标，用以储存好几个部件中共享资源的情况

• 2.将store目标置放在new Vue目标中，那样能够 确保在全部的部件上都能够 采用

• 3.在别的部件中应用store目标中储存的情况就可以

  • 根据this.$store.state特性的方法来浏览情况
  • 根据this.$store.commit("mutations中的方式")来改动情况

• 常见问题

  • 我们都是根据递交mutations的方法，并非立即更改store.state.counter
  • 这是由于Vuex能够 更显著的跟踪情况的转变，因此不必立即更改store.state.counter的值