vuex入门实战，看不懂不要赞！

login.vue文件
<template>
	<div>
		<headers title="登录">
			<router-link slot="left" to="/">返回</router-link>
		</headers>
		<form class="login" v-on:submit.prevent="submit">
			<div class="line">	
				<div v-show="btn && !form.id">id不能为空</div>
				<input type="number" placeholder="输入你的id" v-model="form.id" ref="input2">
			</div>
			<div class="line">
				<div v-show="btn && !form.name">用户名不能为空</div>
				<input type="text" placeholder="输入你的用户名" v-model="form.name">
			</div>
			<button>登录</button>
		</form>
	</div>
</template>
<script>
import headers from '../../components/header' //引入组件
import {
    
     mapActions } from 'vuex'
export default {
    
    
    data(){
    
    
        return{
    
    
        // 初始化数据
        btn:false,
          form:{
    
    
              id:'',
              name: ''
          }  
        }
    },
	mounted () {
    
    
		this.$refs.input2.focus() //获取焦点
		this.$refs.input2.value=2 //初始值
	},
    methods: {
    
    
		...mapActions([USER_SIGNIN]), //辅助函数写法(异步)
        submit(){
    
    
            this.btn = true
            if(!this.form.id || !this.form.name){
    
    
                return false
            }else{
    
    
			   this.USER_SIGNIN(this.form) //传参数
				//  this.$store.commit('USER_SIGNIN',this.form) 同步写法
				  this.$router.push({
    
    path:'/home'})
            }
        }
    },
   components:{
    
    
       headers //注入组件
    }, 
}
</script>
<style lang="scss" scoped>
	.login {
    
    
		padding: 50px;
		text-align: center;
		.line {
    
    
			padding: 5px;
			input {
    
    
				padding: 0 10px;
				line-height: 28px;
			}
		}
		button {
    
    
			padding: 0 20px;
			margin-top: 20px;
			line-height: 28px;
		}
	}
</style>

home.vue文件
<template>
	<div>
		<headers title="首页">
			<router-link slot="left" to="/Index">首页</router-link>
			<router-link slot="right" to="/Singout">退出</router-link>
		</headers>
		<div style="padding: 50px;">{
    
    {
    
    users.name}}欢迎回家</div>
	</div>
</template>
<script>
import headers from '../../components/header'
import {
    
    mapState} from 'vuex'
export default {
    
    
    data(){
    
    
        return{
    
    
        }
    },
    components:{
    
    
       headers   //注入组件
    },
    computed:mapState(['users']) //获取state里面的值
}
</script>

index.vue文件
<style lang="scss" scoped>
	.login-msg {
    
    
		padding: 50px;
		text-align: center;
	}
	.msg {
    
    
		padding: 50px;
		text-align: center;
		font-size: 20px;
		color: red;
	}
</style>
<template>
	<div>
		<headers title="首页">
			<router-link slot="right" to="/home" v-if="users.id">{
    
    {
    
    users.name}}</router-link>
		</headers>
		<div class="login-msg">
			<router-link to="/login" v-if="!users.id">你还未登录，请先登录</router-link>
		</div>
		<div class="msg" v-if="users.id">
			<img width="50" :src="logo" alt=""> <br>
			哈哈，恭喜你已经入坑Vue2
		</div>
		<div id="apps">
        <product-list-one></product-list-one>
        <product-list-two></product-list-two>
    </div>
	</div>
</template>
<script>
 import ProductListOne from '../../view/ProductListOne'
import ProductListTwo from '../../view/ProductListTwo'
import headers from '../../components/header'
import {
    
    mapState} from 'vuex'
import logo from '../../assets/logo.png'
export default {
    
    
    data(){
    
    
        return{
    
    
			logo,
        }
    },
    components:{
    
    
	   headers ,
	   'product-list-one': ProductListOne, //注入组件
        'product-list-two': ProductListTwo //注入组件
	},
	methods: {
    
    
  },
    computed:mapState(['users']) //获取state里面的参数
}
</script>

sigout.vue文件
</style>
<template>
	<div>
		<headers title="退出">
			<router-link slot="left" to="/home">返回</router-link>
		</headers>
		<div class="btn">
			<button v-on:click="submit">确认退出</button>
		</div>
	</div>
</template>
<script>
import headers from '../../components/header'
import {
    
     mapActions } from 'vuex'
export default {
    
    
    components: {
    
    
        headers
    },
    methods: {
    
    
		// ...mapActions(['user_singout']),
		//  ...mapActions([USER_SIGNOUT]), //辅助函数写法
        submit(){
    
    
			// this.$store.commit('user_singout') //vuex普通同步操作
			//  this.USER_SIGNOUT() //调用上面辅助函数才会执行
			this.$store.dispatch('USER_SIGNOUT') //vuex普通异步操作
            this.$router.replace({
    
     path: '/' },() => {
    
    })
        }
    }
}
</script>

productlistone.vue
<template>
    <div id="product-list-one">
        <h2>Product List One</h2>
        <ul>
            <li v-for="product in products">
                <span class="name">{
    
    {
    
     product.name }}</span>
                <span class="price">${
    
    {
    
     product.price }}</span>
            </li>
            
        </ul>
    </div>
</template>

<script>
export default {
    
    
    data () {
    
    
        return {
    
    
            products : this.$store.getters.saleProducts //返回getters处理的结果
        }
    }
}
</script>

<style scoped>
#product-list-one{
    
    
    background: #FFF8B1;
    box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
    margin-bottom: 30px;
    padding: 10px 20px;
}
#product-list-one ul{
    
    
    padding: 0;
}
#product-list-one li{
    
    
    display: inline-block;
    margin-right: 10px;
    margin-top: 10px;
    padding: 20px;
    background: rgba(255,255,255,0.7);
}
.price{
    
    
    font-weight: bold;
    color: #E8800C;
}
</style>

productlisttwo.vue
<template>
    <div id="product-list-two">
        <h2>Product List Two</h2>
        <ul>
            <li v-for="product in products">
                <span class="name">{
    
    {
    
     product.name }}</span>
                <span class="price">${
    
    {
    
     product.price }}</span>
            </li>
            <button @click="minusPrice">减少价格</button>
            <button @click="minusPriceAsync">异步减少价格</button>
        </ul>
        <div class="box" v-if="this.$store.state.count">loading</div>
        <button @click="block">显示</button>
        <button @click="none">消失</button>
    </div>
</template>

<script>
export default {
    
    
    data () {
    
    
        return {
    
    
            products: this.$store.state.products //直接从state里面拿值
        }
    },
    methods: {
    
    
        minusPrice() {
    
    
            this.$store.commit('minusPrice', 2); //同步操作
        },
        minusPriceAsync() {
    
    
            this.$store.dispatch('minusPriceAsync', 5); //异步操作
        },
        block(){
    
    
            this.$store.dispatch('blocking',true) //异步操作
        },
         none(){
    
    
            this.$store.dispatch('none',false) //异步操作
        }
    }
}
</script>

<style scoped>
.box{
    
    
    width:500px;
    height:30px;
    background: rgb(18, 214, 18);
}
#product-list-two{
    
    
    background: #D1E4FF;
    box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
    margin-bottom: 30px;
    padding: 10px 20px;
}
#product-list-two ul{
    
    
    padding: 0;
    list-style-type: none;
}
#product-list-two li{
    
    
    margin-right: 10px;
    margin-top: 10px;
    padding: 20px;
    background: rgba(255,255,255,0.7);
}
.price{
    
    
    font-weight: bold;
    color: #860CE8;
    display: block;
}
</style>

main.js文件
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
    
    
  state:{
    
    
    products: [
      {
    
    name: '鼠标', price: 20},
      {
    
    name: '键盘', price: 40},
      {
    
    name: '耳机', price: 60},
      {
    
    name: '显示屏', price: 80}
    ],
    count:false,
    users:JSON.parse(sessionStorage.getItem('name')) //解决vuex刷新数据丢失的问题
  },
  getters:{
    
     //计算属性
    saleProducts: (state) => {
    
    
      let saleProducts = state.products.map( product => {
    
    
        return {
    
    
          name: product.name,
          price: product.price / 2
        }
      })
      return saleProducts;
    }
  },
  mutations:{
    
     //同步操作
    minusPrice (state, payload ) {
    
    
      let newPrice = state.products.forEach( product => {
    
    
        product.price -= payload
      })
    },
    // 登录
    USER_SIGNIN(state, user) {
    
    
       state.users = user;
   sessionStorage.setItem('name',JSON.stringify(user))
   },
  //  退出
  USER_SIGNOUT(state,user) {
    
    
      sessionStorage.removeItem('name')
      Object.keys(state).forEach(k => Vue.delete(state, k))
  },
  //显示
    block(state,num){
    
    
      state.count = num
    },
    //消失
    none(state,num){
    
    
      state.count =num
    }
  },
  actions:{
    
     //异步
    minusPriceAsync( context, payload ) {
    
    
      setTimeout( () => {
    
    
        context.commit( 'minusPrice', payload ); //绑定 mutations下面的方法（异步改变状态）
      }, 2000)
    },
    // 登录
    USER_SIGNIN(context, user) {
    
    
      context.commit('USER_SIGNIN', user) //绑定 mutations下面的方法（异步改变状态）
     
  },
  // 退出
  USER_SIGNOUT(context,user) {
    
    
      context.commit('USER_SIGNOUT',user) //绑定 mutations下面的方法（异步改变状态）
  },
    blocking(context,item){
    
    
      context.commit('block',item) //绑定 mutations下面的方法（异步改变状态）
    },
    none(context,item){
    
    
      context.commit('none',item) //绑定 mutations下面的方法（异步改变状态）
    }
  }
})
new Vue({
    
    
  el: '#app',
  router,
  store, //注入实例
  components: {
    
     App },
  template: '<App/>'
})

header.vue文件
<template>
    <header class="header">
		<div class="item left">
			<slot name="left"></slot>
		</div>
		<div class="title">{
    
    {
    
    title}}</div>
		<div class="item right">
			<slot name="right"></slot>
		</div>
	</header>
</template>
<script>
export default {
    
    
    props:{
    
    
        title:{
    
    
            type:String,
            default:''
        }
    }
}
</script>
<style lang="scss" scoped>
	.header {
    
    
		position: relative;
		line-height: 38px;
		color: #fff;
		text-align: center;
		background: #222;
		.item {
    
    
			position: absolute;
			top: 0;
			bottom: 0;
			z-index: 1;
			a {
    
    
				color: #fff;
			}
		}
		.left {
    
    
			left: 10px;
		}
		.right {
    
    
			right: 10px;
		}
	}
</style>