Vue2.0六——Vuex

Vuex概念

Vuex其实就是专门为vue设计的集中式状态管理架构,也就是说项目中共享的一些数据

应用及的数据放在store中;改变数据的方式是提交mutations,这是个同步的事物,异步逻辑应该封装在action中
 数据流:前端通过action将传过来的数据进行处理或直接得到数据,
 然后通过mutation把处理后的数据存放到数据库state中 ,
 谁要用就要通过getter从数据库state中取

Vuex的五种属性

State、Mutation 、Action、Getter、 Module
  • state的特性

    一、Vuex就是一个仓库,仓库里面放了很多对象。其中state就是数据源存放地,对应于与一般Vue对象里面的data
    二、state里面存放的数据是响应式的,Vue组件从store中读取数据,若是store中的数据发生改变,依赖这个数据的组件也会发生更新
    三、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中
  • mutation的特性
    mutations 与事件类似,更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
    只有他才能修改store 调用他用commit对象,用来存储修改状态的方法
    (默认第一个参数state,第二个负载对象参数payload)

    // 调用方法一
       this.$store.commit('getGoodsList',this.goodsList)
       //调用方法二
       this.$store.commit({
           type: 'getGoodsList',
           list: this.goodsList
           
       })
  • getter的特性

    一、getters 可以对State进行计算操作,它就是Store的计算属性
    二、 虽然在组件内也可以做计算属性,但是getters 可以在多组件之间复用
    三、 如果一个状态只在一个组件内使用,是可以不用getters
    
    getters: {
       returnTabIndex:state => state.tabIndex 
    }
  • actions

    一、Action 类似于 mutation,不同在于:
    二、Action 提交的是 mutation,而不是直接变更状态。
    三、Action 可以包含任意异步操作

    异步请求的时候用

    commit => mutations
       dispatch => actions
       接收:
       action : {
           increment ({commit},payload) {
               setTimeout(()=>{
                   commit('increment')
               })
           }
       }
       分发:
       this.$store.dispatch('increment',{amount:10})
       //调用方法二
       this.$store.dispatch({
           type: 'increment',
           amount: 10
           
       })
  • module
    vuex将store(一个项目只有一个store)分成模块

    //公用
       state: {},
       mutaions:{},
       action:{},
       getter:{}
       
       const moduleA = {
           state: { tabIndex: ''},
           mutaions:{},
           action:{},
           getter:{}
       }
       
       读取:
       this.$store.state.a.tabIndex

例子(存商品详情)

  • view层 点击商品 并 将详情信息存到store中

    <li @click="gotoDetail(items)" v-for="(items,index) in products" :key="index">
           <img v-lazy.container="items.goodsListImg"/>
           <div class="info">{{items.goodsName}}</div>
           <div class="prices">
               <span class="price">&yen;{{items.price}}</span>
               <span class="buybtn">抢购</span>
           </div>
       </li>
       
       gotoDetail(info) {
           this.$store.commit({
               type: 'GET_PRO_DETAIL',
               productInfo :info
           })
           this.$router.push({name: 'detail'})
       }
  • view层详情页获取数据

    data(){
        return {
            goodsInfo: this.$store.state.productDetail.productInfo
        }
    }
  • vuex => store
    先安装vuex cnpm i vuex -S

    //引入
    import Vue from 'vue'
    import Vuex from 'vuex'
    
    //模块
    import productsList from './modules/products-list'
    import productDetail from './modules/product-detail'
    
    import * as types from './mutation-types'
    
    Vue.use(Vuex)   
    // 这里只定义全局通用的状态
    // 几个子页面或组件间共享的状态按所属模块写到modules中   
    const store = new Vuex.Store({
       state : {
           currentPage: '',
           userInfo: {}
       },
       
       //模板
       modules: {
           productsList,
           productDetail,
           commentsList,
           cartList
       },
       mutations: {
           setPageName(state,payload) {
               state.currentPage = payload
               console.log('切到' + state.currentPage)
           },
           getUserInfo(state,payload) {
               state.userInfo = payload
               console.log('用户信息')
               console.log(state.userInfo)
           }
         }
       })
       export default store
  • moutaion-types.js
    模块中的mutation类型在这里统一管理,使用大写常量进行定义

    //产品详情
    export const GET_PRO_DETAIL = 'GET_PRO_DETAIL'
    ...
  • modules/product-detail.js

    import * as types from '../mutation-types'
    const state = {
       
    }
    
    const getters = {
       
    }
    
    const mutations = {
       [types.GET_PRO_DETAIL] (state,productInfo) {
           state.productInfo = productInfo
           console.log('详情 存了')
       }
    }
    
    export default{
       state,
       mutations
    }
    
    这个例子不是很好。。。看下一个对list数据处理
  • modules/product-list.js

    // 产品列表状态
       import * as types from '../mutation-types'
       
       const state = {
           productsList : [],
           defaultlist: []
       }
       const getters = {
           realList:(state)=>{
               return (type) => {
                   const data = state.productsList
                   
                   switch(type) {
                       case 0:  return state.defaultlist;break;
                       case 1:  return data.sort((a,b) => {return a.price - b.price});break;
                       case 2:  return data.sort((a,b) => {return b.price - a.price});break;
                       case 3:  return data.sort((a,b) => {return a.discount - b.discount});break;
                       case 4:  return data.sort((a,b) => {return b.discount - a.discount});break;
                   }
               }
           },
       }
       const actions = {
           getProlist({ commit },{ productslist }){
               commit(types.SAVE_PRO_LIST,productslist)
           }
       }
       const mutations = {
           [types.SAVE_PRO_LIST] (state,productslist) {
               state.productsList = productslist
               state.defaultlist = productslist
               console.log('列表 存了')
           }
       }
       
       export default {
           state,
           mutations,
           actions,
           getters
       }

相关推荐