vuex 知识点总结

vuex

在vuecli3模板上使用

1. 核心概念：

store，state，getters，mutations，actions

2. 辅助函数：

mapstate，mapactions，mapmutations，mapgetters

配置

export default new Vuex.Store({
    
    
    state: {
    
    
        userInfo: {
    
    
            userName: ''
        }
    },
    getters: {
    
    
        getCookie() {
    
    
            return cookies.getCookie('token') // 从cookie 返回token
        }
    },
    mutations: {
    
    
        test(state, data) {
    
    
            state.userInfo = data
        }
    },
    actions: {
    
    
        clearCookie() {
    
    
            cookies.deleteCookie('token')
        }
    }
})

使用

//计算属性里声明
	computed : {
    
     
		...mapState([
			'userInfo'
		]),
	}

//methods里面声明
		...mapActions(['clearCookie','setUser']),
		...mapGetters([]),
		...mapMutations([]),

//使用的例子
		this.clearCookie()
		this.setUser(111)
		this.$store.commit('test',123)
		this.$store.dispatch('test',234)