Vuex状态管理器

以在mutation等vuex的方法中对于数据进行改变时，将数据同时存储进我们的本地浏览器缓存中；

链接: https://pan.baidu.com/s/1yiW5fbRr8RxK6Jx9AZ7ZDQ?pwd=cj6v

提取码: cj6v 

链接永久有效。

import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)

const store = new Vuex.Store({
	state:{
		name:uni.getStorageSync('name') ? uni.getStorageSync('name') : '未登录的用户'
	},
	mutations:{
		setname(state,name)
		{
			uni.setStorageSync('name',name)
			state.name = name;
		},
		getname(state)
		{
			uni.clearStorageSync();
			state.name = "退出状态用户"
		}
	},
	actions:{
		login(context,name){
			context.commit("setname",name)
		},
		logout(context){
			context.commit("getname")
		}
	}
})
export default store;

// #ifndef VUE3
import Vue from 'vue'
import store from "@/store/store.js"
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
    ...App,
	store
})
app.$mount()

template>
	<view class="content">
		<view class="text-area">
			<text class="title">{{name}}</text>
		</view>
		<text class="title" @tap="login('好想你呀')">按钮</text>
	</view>
</template>

<script>
	import {
		mapState,mapActions
	}from "vuex"
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		computed:{
			...mapState(['name'])
		},
		methods: {
			...mapActions(['login','logout'])
		}
	}
</script>