vue vuex 全局状态管理

vuex 状态集中管理

└── store.js
    ├── index.js          # 组装store和导出store
    ├── actions.js        # 路径
    ├── mutations.js      # 触发事件
    └── modules
        ├── cart.js       # cart module
        └── products.js   # products module

store.js 主文件

	1.安装 cnpm install vuex --save
	2.main.js中引入 
		import Vuex from 'vuex'
		import store from '@/store/store'// /store/store.js  状态管理的主文件
		new Vue({
			  el: '#app',
			  Store,  //引用
			  router:Router,  
			  render: h => h(App)
		})
	3.store.js中集中管理vuex
		import Vue from 'vue'	//引入vue
		import Vuex from 'vuex'		//引入vuex
		import State from './state'  //引入 数据管理文件
		import Mutation from './mutation' //引入 事件触发修改state.js中的数据 文件
		import Getter from './getter'	//引入 返回state.js中的数据 文件
		Vue.use(Vuex); //将vuex 和vue关联
	4. 实例化 store
		 let store=new Vuex.Store({
		    state:State,
		    getters:Getter,
		    mutations:Mutation
		});
		export default store; //main.js 引用

state.js 数据存储

let state={
	data:[],
	data1:[]
}
export default state;

mutation.js 调用state数据 触发事件

let mutation={
	fn(state,params){
	//修改state数据
		state.data = new data;
	}
}
export default mutation;

action.js 调用state数据 异步触发事件

Action 提交的是 mutation，不直接变更状态；
Action可以包含异步操作 store.dispatch({type:'changeFS',res:''})

store.dispatch('fun');//分发 Action
let action={
    fun(context ){ //一个与 store 实例具有相同方法和属性的 context 对象
        context.commit('fun');//提交一个 mutation
        context.state ('stateName');//获取state
        context.getters('gettersName');//获取 getters
    },
    fun1({commit,state,getters}){
    	...state.cart.added;
		commit(types.CHECKOUT_REQUEST); //参数解构
	}
}
export default action;

getter.js 返回state数据

let getter={
	getfn(state){		
		return state.data1;//返回state数据
	}
}
export default getter;

组件内使用

直接引用

methods:{
//触发Mutations 事件
	this.$store.commit(fn,{params:paramsdata}) 
//获取store里面数据 返回传值
	this.$store.state.data 
	this.$store.getters.data 
}

mapGetters mapMutation 助手

//触发Mutations 事件
  methods: {
    ...mapMutations({
      fninfo: "fn" //fninfo()：定义mutation事件fn
    })
  }
//mapGetters 返回传值对象
  computed: {
    ...mapGetters({
      getfninfo: "getfn" //getfninfo：定义返回state对象
    })
  }
    computed: {
    ...mapGetters([
       "getfn" //直接返回state对象
    [)
  }