vuex 基础

vue的一个状态管理工具 ，一般管理多个组件共享使用的数据 ， 公共对象，按照写法进行管理，里面有些核心

1 下载
npm i vuex@3 --save

2 src/store/index.js
	import Vue from "vue"
	import Vuex from "vuex"
	Vue.use(Vuex)
	
	const state = {count:10}
	const store = new Vuex.Store({
		state
	})
	
	export default store
	
3 main.js
	import store from "./store"
	
	new Vue({
		store
	})

1 state 共享状态

存储数据的
const state = {}       this.$store.state['属性']
computed:{
	...mapState(['属性'])
}

2 mutations 唯一修改数据的

const mutations = {   this.$store.commit('ADD',参数)
		ADD(state,payload){}
}
methods:{
	...mapMutaitions(['ADD'])
}

 getters state的计算属性

const getters = {   this.$store.getters.doun
	doun(state){
		return  state.count
	}
}

computed:{
	...mapGetters(['doun'])
}

4 actions 提供上下文环境 本身不做修改

 

const actions = {     this.$store.dispatch("ADD_ACTION",参数)
	 ADD_ACTION({commit},payload){
	 //	 执行异步请求
	 	commit("ADD",payload)
	 }
}

methods:{
	...mapActions(['ADD_ACTION'])
}

 5 modules

数据按照类型或者使用进行模块化
count.js
export default {
	namespaced:true //命名空间
	state:{
		count:0
	},
	mutations:{    this.$store.commit('count/ADD_COUNT')
	ADD_COUNT(){}
	}
	actions:{
		add(context){
				//其它模块的
				context.rootState.user.username //
				context.commit("user/SET_NAME",参数,{root:true})
		}
	}
}

 6 持久化存储 -- 额外

plugins: [VuexPersistence({
        key: 'Vuex-Persistence',  //浏览器存储key值
        storage: window.sessionStorage,  //存储方式  localStorage
        reducer: state => {
            // console.log('VuexPersistence:state', state)
            //
            return {
                shopList: state.shopList,   //要持久化的属性
                n: state.n   //要持久化的属性
            }
        }

    })]
})