先来一张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。
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
}
三、在组件中使用：
param:"index",
url:"url"
