首先：Vuex是什么？

有關于Vuex，官網(wǎng)是這樣定義的：Vuex 是一個專為 Vue.js 應用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應用的所有組件的狀態(tài)，并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化。
我是這么認為的：Vuex是為了解決多個組件共享狀態(tài)而存在的。他能夠有效的解決兄弟組件，父子組件，爺孫組件的傳值。他將組件的共享狀態(tài)抽取出來，以一個全局單例模式管理。

Vuex有以下5個重要屬性：

1、State
單一狀態(tài)樹，每個應用將僅僅包含一個 store 實例。
2、Getter
可以認為是 store 的計算屬性，getter 的返回值會根據(jù)它的依賴被緩存起來，且只有當它的依賴值發(fā)生了改變才會被重新計算。
3、Mutation
更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation。
4、Action
類似于 mutation，在于Action 提交的是 mutation，而不是直接變更狀態(tài)；Action 可以包含任意異步操作
5、Module
Vuex 允許我們將 store 分割成模塊（module）。每個模塊擁有自己的 state、mutation、action、getter。模塊內(nèi)部的 action、mutation 和 getter 是注冊在全局命名空間的。

1、不使用Module開發(fā)

• 文件存放

└── store
    ├── index.js          # 我們組裝模塊并導出 store 的地方
    ├── state.js          # 跟級別的 state
    ├── getters.js        # 跟級別的 getter
    └── mutations.js      # 根級別的 mutation

• index.js存放的內(nèi)容

import vue from 'vue';
import vuex from 'vuex';
import state from './state.js';
import * as getters from './getters.js';
import mutations from './mutations.js';

vue.use(vuex);

export default new vuex.Store({
  state,
  getters,
  mutations
});

• state.js存放的內(nèi)容

const state = {
  name: 'jwl',
  age: 24
};

export default state;

• getters.js存放的內(nèi)容

export const name = (state) => {
    return state.name;
}

export const age = (state) => {
    return state.age
}

export const other = (state) => {
    return `My name is ${state.name}, I am ${state.age}.`;
}

• mutations.js存放的內(nèi)容

export default {
    SET_NAME(state, name) {
        state.name = name;
    },
    SET_AGE(state, age) {
        state.age = age;
    }
};

• main.js存放的內(nèi)容

import App from './App.vue';
import Vue from 'vue';
import router from './router/index.js'
import vuex from 'vuex'
import store from './store'

Vue.use(vuex);

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

• 在組件中使用

<template>
  <div>
    姓名 {{name}} 
    <br>
    年齡 {{age}}
    <br>
    {{other}}
    <input @click="changeName" type="button" value='改變名字'>
  </div>
</template>
 
<script>
import { mapGetters, mapMutations ,mapState} from "vuex";

export default {
  components: {},
  computed: {
    ...mapGetters(["name", "age", "other"])
    
    //也可以用這個，但mapGetters要強大
    //...mapState(["name", "age", "other"])
  },
  created() {},
  methods: {
    ...mapMutations({
      setName: "SET_NAME",
      setAge: "SET_AGE"
    }),
    changeName() {
      this.setName("jiawan");
    }
  }
};
</script>

2、使用Module開發(fā)

• 文件存放

└── store
    ├── index.js          # 我們組裝模塊并導出 store 的地方
    └── modules
        ├── demo1.js         # 模塊1
        └── demo2.js         # 模塊2

• index.js存放的內(nèi)容

import vue from 'vue';
import vuex from 'vuex';
import demo1 from './modules/demo1.js';

vue.use(vuex);

export default new vuex.Store({
  modules: {
    demo1
  }
});

• demo1.js存放的內(nèi)容

const demo1 = {
  state: {
    names: `demo1`
  },
  mutations: {
    change2(state, va) {
      state.names = va.new;
    }
  },
  getters: {
    names(state, getters, rootState) {
      return state.names + 'hhhhh'
    }
  }
}
export default demo1;

• main.js存放的內(nèi)容不變
• 在組件中使用

<template>
  <div>
    <br>
    //state內(nèi)容，也可以在計算屬性里面
    {{$store.state.demo1.names}}
    <br> 
    {{demo1name}} 
    <input @click="changeDemo1Name" type="button" value='改變demo1名字'>
  </div>
</template>
 
<script>
export default {
  components: {
  },
  computed: {
    //getters內(nèi)容
    demo1name() {
      return this.$store.getters.names;
    }
  },
  created() {},
  methods: {
    changeDemo1Name() {
      this.$store.commit("change2", {
        new: "修改了修改了..."
      });
    }
  }
};
</script>