vue状态管理-学习笔记

一、create vue l9 配置 css babel route store 安装axios、vuex-persistedstate
二.结构

1.assets不变
2.components-search-input

<template>
	<div class="header">
		<div class="header-wrap">
			<slot name="left"></slot>
			<div class="search-box">
				<div class="iconfont icon-baseline-search-px"></div>
				<input class="input" type="search" placeholder="请输入查询的内容" />
			</div>
			<slot  name="right" >				
			</slot>
		</div>
	</div>
</template>

<script>
	export default{

	}
</script>

<style scoped="scoped">
	.header {
		width: 100%;
		
	}

	.header-wrap {
		width: 100%;
		display: flex;
		flex-direction: row;
		height: 30px;
		line-height: 30px;
		margin-left: 15px;
		margin-top: 20px;
		
	}
	.search-box{
		width: 60%;
		display: flex;
		flex-direction: row;
		align-items: center;
		vertical-align: middle;		
		background-color: white;
		border-radius: 15px;
		
	}
	.input {
		outline: none;
		border: none;
		
	}
</style>

3.router

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

  const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/login',
    component: () => import('../views/pass-login.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

3.store

import Vue from 'vue'
import Vuex from 'vuex'
//引入插件
import persistedState from 'vuex-persistedstate'
Vue.use(Vuex)

export default new Vuex.Store({
	plugins: [
			persistedState({
				storage: window.sessionStorage
			})
		],
  state: {
	  isLogin:false,
	  userInfo:{
		 
	  }
  },
  getters:{
	newName(state){
		if(state.isLogin)
			return '欢迎嘟嘟'+state.userInfo.userName;
		else
			return '未登录';
	}  
  },
  mutations: {
	  toggleLogin(state,payload){
		  state.isLogin=!state.isLogin;
	  },
	  setUserInfo(state,user){
	  		  state.userInfo=user;
	  }
  },
  actions: {
		login(context,user){
 		  context.commit('setUserInfo',user)
 		  context.commit('toggleLogin')
 	  },
 	  logout({commit}){
 		  commit('toggleLogin');
 		  commit('setUserInfo',{})
 	  }
   },
   modules: {
   }
 })

5.views
Home.vue

<template>
  <div class="home">
   <search-input>
	   <template #right>
		   <div v-if="isLogin">
			   <div class="iconfon icon-logout"
			   @click="logout">{{newName}}</div>
		   </div>
		   <div v-else>
			   <div class="iconfon icon-git-repository-private-line"
			   @click="loginHandler">请登录吧</div>
		   </div>
		   <!-- <div>{{newName}}</div> -->
			<!-- <div v-if="isLogin" class="loginName">
			   <div class="iconfont icon-logout"></div>
			   <div>{{userInfo.name}}</div>
			 </div> -->
	   </template>
   </search-input>
  </div>
</template>

<script>
import searchInput from "../components/search-input.vue"
import {mapState,mapGetters,mapMutations,mapActions} from "vuex"
export default {
  name: 'Home',
  components: {
    searchInput
  },
  computed:{
	  ...mapState(['isLogin','userInfo']),
	  ...mapGetters(['newName'])
  },
  methods:{
	// logoutin(){
	// 	//不要直接修改 $store.state.isLogin
	// 	//this.$store.commit('toggleLogin')
	// 	this.toggleLogin()
	// },
	// login(){
		
	// },
	...mapMutations(['toggleLogin']),
	...mapActions(['logout']),
	loginHandler(){
		this.$router.push('/login')
	}
  }
  // computed:mapState({
	 //  isLogin:'isLogin',
	 //  // isLogin:(state)=>state.isLogin,
	 //  userName:function(state){
		//   return state.userInfo.name
	 //  }
  // })
 //  computed:{
	//  isLogin(){
	// 	 return this.$store.state.isLogin
	//  },
	//  userName(){
	// 	 return this.$store.state.userInfo.name
	// }
 //  }
}
</script> 
<style scoped="scoped">
.header{
	position: fixed; 
	top: 0;
	left: 0;
	width: 100%;
	height: 70px;
	background: #B3D4FC;
}
.loginName{
	display: flex;
	flex-direction: row;
}
</style>

pass-login.vue

<!-- 密码登录组件 -->
<template>
	<div class="content">
		<div class="mobile-input">
			<input type="number" v-model="mobileNum" placeholder="输入手机号" class="mobile" />
			<input type="password"  v-model="passwd" placeholder="输入帐号密码" class="mobile" />
		</div>
		<div class="find-mm small-text">找回密码</div>
		</view>
		<button class="login-btn" @click="loginHandler">立即登录</button>
		<div class="reg-text">
			<div class="small-text">还没有帐号,立即注册</div>
		</div>
	</div>
</template>

<script>
	import {mapActions} from "vuex"
	export default {
		data() {
			return {
				mobileNum: '', //手机号
				passwd: '' //密码
			}
		},
		methods: {
			...mapActions(['login']),
			loginHandler(){
				let parm={
					mobileNum: this.mobileNum,
					passwd: this.passwd
				}
				this.axios.post('/api/login',parm)
				.then((res)=>{
					console.log(res.data.data.userInfo)
					if(res.data.code==0){
						//this.$store.dispatch('login',res.data.data.userInfo)
						this.login(res.data.data.userInfo);
						this.$router.push("/");
					}

				})
			}
		}
	}
</script>

<style scoped="scoped">
	.content {
		width: 100%;
		height: 100%;
		position: relative;		
	}

	.mobile-input {
		margin-top: 120px;
	}

	.mobile {
		font-size: 18px;
		line-height: 18px;
		width: 92%;
		margin-left: 4%;
		padding-top: 10px;
 		padding-bottom: 10px; 
		margin-top: 50px;
		margin-bottom: 10px;
		border-bottom: 1px solid #D8D8D8;
	}

	.find-mm {
		position: absolute;
		right: 10px;
	}

	.login-btn {
		width: 80%;
		height: 40px;
		margin-top: 120px;
		margin-left: 30px;
		margin-right: 30px;
		font-size: 18px;
		background-color: #FFDF00;
		border-radius: 25px;
	}

	.small-text {
		font-size: 14px;
		line-height: 14px;
		color: gray;
	}

	.reg-text {
		margin-top: 30px;
		text-align: center;
	}
</style>

6.App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<style lang="less">
</style>

7.main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from "axios"
import VueAxios from "vue-axios"

import './assets/font/iconfont.css'

Vue.config.productionTip = false
Vue.use(VueAxios,axios)

axios.defaults.baseURI="http://localhost:8080";
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

8.vue.config.js

module.exports = {
	// webpack-dev-server 相关配置
	devServer: {
		open: true,
		host: 'localhost',
		port: 8080,
		https: false,
		hotOnly: false,
		// http 代理配置
		proxy: {
			'/api': {
				target: 'http://127.0.0.1:8080/api',
				changeOrigin: true,
				pathRewrite: {
					'^/api': ''
				}
			}
		},
		before:require("./mock/mockData")
	}
}

三、效果图