vue中如何获取或者改变vuex中的值_怎么取vuex的值

store–>index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
	isLogin:localStorage.getItem("isLogin")?localStorage.getItem("isLogin"):false,//判断是否登录
  },
  mutations: {
	//判断是否登录
	setLogin(state,payload){
		state.isLogin=payload
		localStorage.setItem("isLogin",state.isLogin)
	},
	//退出登录
	logout(state){
		console.log("[退出登录]",state)
		state.isLogin=false
		localStorage.clear();//清除本地缓存
	}
  },
  actions: {
	getLogin(context,payload){
		context.commit("setLogin",payload)
	}
  },
  modules: {
	
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

在页面中使用或者修改vuex中的值

<script>
	import { mapState, mapActions,mapMutations } from "vuex"
	export default {
		name:"index",
		data() {
			return {
				
			}
		},
		computed:{
			...mapState({
				isLogin:state=>state.isLogin
			}),//等同于==>...mapState(['isLogin']);映射 this.isLogin 为 this.$store.state.isLogin
		},
		mounted(){
			
			console.log("[mapState]",this.isLogin)
			
			this.$store.state.isLogin;//等同于==》this.isLogin
			
			this.$store.dispatch("getLogin",true);//等同于==》this.getLogin(true)；dispatch触发actions里的方法，Action 提交的是 mutation，而不是直接变更状态，Action 可以包含任意异步操作
			
			this.$store.commit("logout");//等同于==》this.logout()；commit触发mutations里的方法，更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
			
			console.log(this.$store.state.isLogin)
			console.log(localStorage.getItem("isLogin"))
		},
		methods:{
			...mapMutations(["logout"]),// 将 `this.logout()` 映射为 `this.$store.commit('logout')`
			...mapActions(["getLogin"]),// 将 `this.getLogin()` 映射为 `this.$store.dispatch('getLogin')`
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33