简单的vuex使用示例

最新推荐文章于 2024-10-09 10:29:44 发布

piaoyangde

最新推荐文章于 2024-10-09 10:29:44 发布

阅读量1.4k

点赞数 2

分类专栏： vue vuex 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/piaoyangde/article/details/122888621

版权

vue 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

vuex

1 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Vuex在Vue应用中管理store，包括模块划分、state、getters、mutations和actions的定义，以及在模板和组件中通过mapState、mapGetters和mapMutations进行状态操作的示例。

摘要由CSDN通过智能技术生成

创建store目录及其文件：

store文件夹下的index.js代码：

import user from './modules/user.js'
import test from './modules/test.js'


import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
	modules: {
		user,
		test,
	},
})
export default store

user.js中的代码：

export default {
	namespaced: true,
	state: {
		token: localStorage.token,
		tokenExpired: localStorage.tokenExpired,
		userInfo: {},
	},
	getters: {
		isTokenValid(state) {
			return !!state.token && state.tokenExpired > Date.now()
		},
	},
	mutations: {
		// 如果有两个以上的参数，应当将其作为一个对象来传参
		SET_TOKEN: (state, { token, tokenExpired }) => {
			state.token = token
			state.tokenExpired = tokenExpired
			localStorage.token = token
			localStorage.tokenExpired = tokenExpired
		},
		REMOVE_TOKEN: (state) => {
			state.token = ''
			state.tokenExpired = 0
			state.userInfo = {}
			localStorage.clear()
		},
		SET_USER_INFO: (state, userInfo) => {
			state.userInfo = userInfo
		},
	},
	actions: {},
}

调用的方法：

<template>
	<div>
		{{ tokenExpired }}{{ isvalid }}
	</div>
</template>

<script>
import { mapState, mapGetters ,mapMutations } from 'vuex'
export default {
	computed: {
		...mapState('test', ['count']),
		...mapState('user', ['tokenExpired', 'token']),
		...mapGetters({
			isvalid: 'user/isTokenValid',
		}),
	},
	methods: {
        ...mapMutations({
            saveToken(commit,obj){
                commit('user/SET_TOKEN',obj)
            }
        }),
		test() {
			this.saveToken({
                token: this.token,
                tokenExpired:this.tokenExpired
            })
		},
	},
}
</script>

以上是vuex使用的一个简单示例。