我愛吃花椒

　　先來一張vuex的帥照

　　第一眼看到這張圖片我內心是萬匹草泥馬飛過。

　　簡單理解：

　　 vuex：一個可以全局被使用的狀態管理的“倉庫”：state.js中定義初始狀態，通過action去觸發mutation從而去改變狀態。

　　一、在src目錄下：新建一文件夾store，然后在store內建一個store.js

　　　　//引入倚賴
　　　　import Vue from 'vue'
　　　　import Vuex from 'vuex'
　　　　//使用vuex
　　　　Vue.use(Vuex);

　　　　//引入模塊
　　　　import relationNode from './relationNode'

　　　　//創建store
　　　　export default new Vuex.Store({//這里的store一定要大寫，不然會報錯
　　　　　　modules: {

　　　　　　　　relationNode

　　　　　　}

　　　　})

　　二、在store文件內新建某一需要使用vuex的模塊文件夾如relationNode文件夾---里面我需要使用關系節點的ID以及節點的url地址

　　　　So，在state.js中先定義初始狀態index以及url?！　　?/p>

　　　　export default{
　　　　　　index:'',
　　　　　　url:''
　　　　}

　　　　1、在mutations-types.js中：　

　　　　　　//查詢節點的id：

　　　　　　export const NODE_ID = 'NODE_ID';

　　　　　　//查詢節點圖片地址：
　　　　　　export const NODE_URL='NODE_URL'

　　　　2、在mutation.js中：　　　

　　　　　　import * as types from './mutations-types'
　　　　　　export default{
　　　　　　　　[types.NODE_ID](state,param){
　　　　　　　　　　state.index=param;
　　　　　　　　},
　　　　　　　　[types.NODE_URL](state,param1){
　　　　　　　　　　state.url=param1;
　　　　　　　　}
　　　　　　}

　　　　3、在action.js中：

　　　　　　import * as types from './mutations-types'
　　　　　　//節點id
　　　　　　export const nodeId =({commit},param)=>{//這里nodeId 相當于一個方法，param是傳遞的參數----和mutation的param一致
　　　　　　　　commit(types.NODE_ID,param);
　　　　　　}
　　　　　　//節點圖片地址
　　　　　　export const nodeUrl=({commit},param1)=>{
　　　　　　　　commit(types.NODE_URL,param1)
　　　　　　}

　　　　4、getters.js中：（獲取mutation之后的狀態）

　　　　　　export default {
　　　　　　　　index: state=> state.index,
　　　　　　　　url:state=>state.url
　　　　　　}

　　　　5、index.js中：　　

　　　　　　import * as actions from './actions'
　　　　　　import mutations from './mutation'
　　　　　　import state from './state'
　　　　　　import getters from './getters'

　　　　　　export default{
　　　　　　　　state,
　　　　　　　　mutations,
　　　　　　　　getters,
　　　　　　　　actions
　　　　　　}

　　三、在組件中使用：