Vuex使用 +模块化使用

1、模块化 引入并导出
import Vue from 'vue'
import Vuex from 'vuex'
import user from './module/user'
import app from './module/app'
import dict from './module/dict'

Vue.use(Vuex)
export default new Vuex.Store({
    state: {
        //
    },
    mutations: {
        //
    },
    actions: {
        //
    },
    modules: {
        user,
        app,
        dict
    }
})
2、模块内容
export default {
    state: {
        data: {}
    },
    mutations: {},
    getters: {
    },
    actions: {
        }
    }
}
3、页面使用
import { mapState } from "vuex";
        computed: {
            breadCrumbList() {
                return this.$store.state.app.breadCrumbList
                		//vuex + state数据 + 值
            }
        },
		this.$store.commit("selectMenu", obj);//修改值一样

  computed: {
    ...mapState({  //把数据映射到activePath
      // 从 state 中的到的计算属性
      activePath: (state) => state.tag.activePath, // 已选中菜单
      tabList: (state) => state.tag.tabList, // tags菜单列表
    }),
  },

========================================================

vuex 使用创建store.js 仓库来统一管理数据
	下载yarn add vuex -S
	
1、创建store.js 内调用
	import Vue from 'vue'
	import Vuex from 'vuex'
	Vue.use(Vuex)
	export default new Vuex.Store({
			state:{	//状态，所有交互数据都放在state中
				name:"张四"
			},
			mutations:{ //vuex所有state数据,只能由mutation修改
				//vuex会把整个state传递给每一个mutation小函数
				changename(state){
					state.name='张五'
				}
			}
		})
2、在main.js引入store
	import store from './store.js'
    new Vue({
        store //和router一起挂出去
    })
3、使用：  //都在computed内进行调用,防止重复取值,提升代码性能
	this.$store.state.name
4、改值 
	this.$store.commit('changename') //这里是传入mutation内的函数名
	===================================================
1关于调用：	state
	在.vue中调用
	答：1.{{$store.state.count}}	//{{}}内直接调用
	    2.按需引入  调用{{count}}
	    	import {mapState} from "vuex"
			conputed:{
				...mapState(['count']) //通过vue提供的mapState函数导入
			}
 	=================================================
2关于使用：	Mutation 函数操作 //不可执行异步操作,只要这定义的函数才有权力修改值
	1.在stote 下面 index.js中使用
	答：mutations:{	//传入state的值
			add(state){
				state.count++	//变更状态
			},
			addn(state,n){
				state.count+=n   //加上传递进去的参数
			}
		}
		调用：methods:{
				adds(){//这是定义的一个点击事件
					this.$store.commit('add') //这里传入上方add函数
				},
				addsn(){//可以传参进去改值
					this.$store.commot('addn',2)//传递2进去进行递增
				}
			}
		2.引入import {mapMutations} from 'vuex'
			methods:{
				...mapMutations(['sub','subN']),//调用index.js内的函数名
				subs(){
					this.sub()	//直接可以调用,映射过来的mapMutations
				}
			}
 	=================================================
3关于使用：	Action    //专门用来执行异步操作的
		1.actions:{
				addAsync(context,n){//传入参数
					setTimeout(()=>{
						context.commit('add')//add是上面的函数名,调用改值
						context.commit('add',n)
					},1000)
				}//用context.commit来调用上面的函数
			}
		  btn(){//这里的dispatch函数,专门用来触发action，这是视图层
				this.$store.dispatch('addAsync')
				this.$store.dispatch('addAsync',2)//传参
			}
		2.同样可以使用引入
			import {mapActions} from "vuex"
			methods:{...mapActions(['sub'])}//直接展开然后
			this.sub() //进行调用

 	=================================================
4关于使用：	Getter  //和计算属性类似
		1.getters:{
				showNum(state){
					return '当前最小的数量是【'+state.count+'】'
				}
			}
		调用：{{$store.getters.showNum}} //实现效果
		2.同样可以使用引入
		import {mapGetters} from "vuex"
		computed:{...mapGetters(['shgowNum'])}