vue-day08 vuex

vue-day08 vuex

1.vuex

什么是vuex?

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

1.安装

npm i vuex --save

2.引入 main.js

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

Vue.use(Vuex)
new Vue({
  el: '#app',
  router,
  store:new Vuex.Store({
    // 基础数据
      state:{
        name:'张三',
        age:20
      },
      // 操作基础数据的方法  处理同步操作 state指的是当前的初始值
      mutations:{
         changeName(state){
            state.name='李四'
         }
      },
      // 处理异步操作  context  指的是当前的仓库
      actions:{
        changeN(context){
          setTimeout(()=>{
              context.commit('changeName')
          },1000)
        }
      },
      // 导出数据给组件使用 1.批量导出数据 2.可以得到计算属性
      getters:{
        name(state){
          return state.name
        },
        sayHi(state){
          return `我叫${state.name}`
        },
        age(state){
          return state.age
        }
      }

  }),
  components: { App },
  template: '<App/>'
})

3使用

a.vue
<div class="box">
    <div>姓名:{{$store.state.name}}</div>
    <div>年龄:{{$store.state.age}}</div>
    //z这是触发mutations的方法  也就是同步操作
    <button @click="$store.commit('changeName')">点击修改姓名为:李四</button>
    //触发actions方法,也就是异步操作
    <button @click="$store.dispatch('changeN')">通过action触发修改name</button>
</div>

4.getters

main.js中
// 导出数据给组件使用 1.批量导出数据 2.可以得到计算属性
      getters:{
        name(state){
          return state.name
        },
        sayHi(state){
          return `我叫${state.name}`
        },
        age(state){
          return state.age
        }
      }

5.getters使用

c.vue
 <div>getters:姓名:{{$store.getters.name}}</div>
 <div>getters:计算属性{{$store.getters.sayHi}}</div>
 <div>getters:年龄{{$store.getters.age}}</div>

6.辅助函数

mapGetters–>computed

mapActions-.>methods

import {mapGetters,mapActions} from 'vuex'
 computed:{
        // 如果以数组方式导出,那么getters里面的名字要与导出的一致
        // ...mapGetters([
        //     'name',
        //     'sayHi',
        //     'age'
        // ])
        // 第二种导出方式
        ...mapGetters({
            myname:'name',
            mysayHi:'sayHi',
            myage:'age'
        })
    },
    
    methods:{
    ...mapActions({
        changeM:'changeM'
    })
},

注意:

  1. mapActions导出的数据只能修改store中的actions里面定义的方法,同时需要在mutations定义一个方法用来真正的修改state的值

    2.单向数据流,所以不能应用于表单元素

重点:单向数据流,过程不可逆,也就是说 mutations不能修改actions

1.创建项目

2.清空项目

3.初始化项目(reset.css)

4.安装依赖 (axios vuex qs)

5.创建组件 (home,food,foodDetail,movie,movieDetail)

6.配置路由

7.uitl-》request.js 写的是所有的axios请求

import axios from 'axios'
import qs from 'qs'

const baseUrl = '/api'

// 拦截器
axios.interceptors.response.use(res=>{
    console.log('=========请求地址:'+res.config.url+'==============')
    console.log(res)
    return res
})


// 电影列表
export const reqMovie=()=>{
    return axios({
        url:baseUrl+'/movie',
        method:'get'
    })
}
// 电影详情
export const reqMovieDetail=(params)=>{
    return axios({
        url:baseUrl+'/getMovieDetail',
        method:'get',
        params:qs.stringify(params)
    })
}


// 美食列表
export const reqFoodList=()=>{
    return axios({
        url:baseUrl+'/foodList',
        method:'get',
    })
}

// 美食详情
export const reqFoodDetail=(id)=>{
    return axios({
        url:baseUrl+'/getFoodDetail',
        method:'get',
        params:id
    })
}

8.创建仓库(store->index.js)

import Vue from 'vue'
import Vuex from 'vuex'
import { reqMovie ,reqMovieDetail,reqFoodList,reqFoodDetail} from '../util/request'
Vue.use(Vuex)

const state = {
    movies: [],//电影的初始值,
    movieDetail:{}, //电影详情的初始值
    foods:[],
    foodDetail:{}
}
const mutations = {
    //   获取电影列表
    getMovieList(state,arr) {
       state.movies = arr
    },
      //   获取电影详情
    getMovieDetail(state,obj){
        state.movieDetail=obj
    },
      //   获取美食列表
    getFoodList(state,arr){
        state.foods = arr
    },
     //   获取美食详情
    getFoodDetail(state,obj){
        state.foodDetail = obj
    }
}
const actions = {
    // 异步请求movie数据
    requestMovie(context) {
        reqMovie().then(res => {
            console.log(res)
            context.commit('getMovieList',res.data.data)
        })
    },
      // 异步请求movie详情数据
    requsetMovieDetail(context,id){
        reqMovieDetail(id).then(res=>{
            console.log(res)
            context.commit('getMovieDetail',res.data.detail)
        })
    },
    // 美食列表
    requestFood(context){
        reqFoodList().then(res=>{
            console.log(res)
            context.commit('getFoodList',res.data.data)
        })
    },
    // 美食详情
    requestFoodDetail(context,id){
        reqFoodDetail(id).then(res=>{
            console.log(res)
            context.commit('getFoodDetail',res.data.detail)
        })
    }
}
const getters = {
    movies(state){
        return state.movies
    },
    movieDetail(state){
        return state.movieDetail
    },
    foods(state){
        return  state.foods
    },
    foodDetail(state){
        return state.foodDetail
    }
}


export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters
})

9.movie.vue

<template>
<div>
    <h2>电影列表</h2>
    <ul>
        <li is='router-link' :to="'/movieDetail?id='+item.id" v-for='item in movies' :key='item.id'>
            <div>电影名称:{{item.name}}</div>
            <div>电影价格:{{item.price}}</div>
        </li>
    </ul>
</div>
</template>
<script>
import {mapGetters,mapActions} from 'vuex'
export default {
    computed:{
        ...mapGetters({
            movies:'movies'
        })
    },
components:{
 },
data () {
 return {
 }
},
methods:{
    ...mapActions({
        requestMovie:'requestMovie'
    })
},
mounted(){
    this.requestMovie()
}
}
</script>
<style scoped>
</style>

10.movieDetail.vue

<template>
<div>
    <h3>电影详情</h3>
    <img :src="movieDetail.img" alt="">
    <div>电影名称:{{movieDetail.name}}</div>
    <div>{{movieDetail.price}}</div>
</div>
</template>
<script>
import {mapActions,mapGetters} from 'vuex'
export default {
    computed:{
        ...mapGetters({
            movieDetail:'movieDetail'
        })
    },
components:{
 },
data () {
 return {
 }
},
methods:{
    ...mapActions({
        requsetMovieDetail:'requsetMovieDetail'
    })
},
mounted(){
    var id = this.$route.query.id
    console.log(id)
    this.requsetMovieDetail({'id':id})
}
}
</script>
<style scoped>
</style>

注意:

1.详情页传值。需要在store中有接收的位置

2.?传参 用query获取id

/传参 用params获取id

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值