Vue全家桶

最近使用Vue全家桶仿了一个音乐app。

这里对Vue全家桶做一个介绍。原文地址：https://blog.csdn.net/qq_33295794/article/details/79024915

全家桶包含了vue-router（http://router.vuejs.org），vuex（http://vuex.vuejs.org）， vue-resource（https://github.com/pagekit/vue-resource）。再加上构建脚手架工具vue-cli，sass样式,就是一个完整的vue项目的核心构成。即，项目构建工具、路由、状态管理、http请求工具（参考：）

Vue.js 为核心框架，搭配 Vue-router，Vuex，Axios，Mock.js，Axios-mock-adapter 框架做完全前端开发的框架集合

在package.json文件中保存了所有你需要的组件的名称和版本

看 dependencies 和 devDependencies 这两个，在安装教程中
使用 --save 参数则是安装到 dependencies，dependencies 里面的插件是需要发布到生产环境的
使用 --save-dev 参数则是安装到 devDependencies，devDependencies 里面的插件只用于开发环境

Vue两大核心思想：组件化和数据驱动。组件化：把整体拆分为各个可以复用的个体，数据驱动：通过数据变化直接影响bom展示，避免dom操作。 

下面分别介绍各个部分

1. Vue-cli是快速构建这个单页应用的脚手架

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

2. vue-router

使用时，必须通过Vue.use()明确安装路由功能：

import  Vue  from'vue'
import VueRouter from'vue-router'

Vue.use(VueRouter)

在使用中，可以利用vue的过渡属性来渲染出切换页面的效果

3.vuex

专门为vue.js应用程序开发的状态管理可以理解为全局的数据管理。vuex主要由五部分组成：state  action、mutation、getters、mudle组成。

使用流程是： 组件中可以直接调用上面四个部分除了mudle

a. state

类似vue 对象的data, 用来存放数据以及状态。存放的数据为响应式，如果数据改变，那么依赖数据的组件也会发生相应的改变。

获取state的两种方式例子：

1.store.getters['getRateUserInfo']
2. ...mapGetters({
        UserInfo: 'login/UserInfo', // 用户信息
        menuList: 'getMenuList', // approve 运价审批
        RateUserInfo: 'getRateUserInfo' // Rate用户信息
   })

注意：可以通过mapState把全局的state和 getters 映射到当前组件的 computed计算属性中。

b. actions

Action 通过 store.dispatch 方法触发：action支持异步调用（可以调用api），mutation只支持操作同步，并且action提交的是 mutation，而不是直接变更状态。

例如：

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})


// 音乐app

  export const deleteSongList = function ({commit}) {
  commit(types.SET_CURRENT_INDEX, -1)
  commit(types.SET_PLAYLIST, [])
  commit(types.SET_SEQUENCE_LIST, [])
  commit(types.SET_PLAYING_STATE, false)
}

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。

 实践中，我们会经常用到 ES2015 的 参数解构 来简化代码（特别是我们需要调用 commit 很多次的时候）：

c. mutation

每个 mutation 都有一个字符串的 事件类型(type) 和一个 回调函数(handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。

const mutations = {
  [types.SET_SINGER](state, singer) {
    state.singer = singer
  },
  [types.SET_PLAYING_STATE](state, flag) {
    state.playing = flag
  }]
export default mutations

 

d.getters

Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算

const getters = {
  getRateInitData: state => state.rateInitData,
  getchooseRateObj: state => state.chooseRateObj,
  getSearchRateParams: state => state.searchRateParams,
  getSearchRateResult: state => state.searchRateResult,
  getRateUserInfo: state => state.RateUserInfo,
  getWaitApprovalParams: state => state.waitApprovalParams
}

mapGetters 辅助函数

mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：...mapGetter([])

这里加一个例子：

//vuex/modules/user.js
import api from '../../fetch/api'
import * as types from '../types'

const state = {
    // 用户登录状态
    loginStatus: JSON.parse(localStorage.getItem('loginStatus')) || false,
}
const actions = {
    /**
     * 用户登录
     */
    setUserInfo({ commit }, res) {
        localStorage.setItem('loginStatus', true)
        commit(types.SET_LOGIN_STATUS, true)
    },
    /**
     * 退出登录
     */
    setSignOut({ commit }) {
        localStorage.removeItem('loginStatus')
        commit(types.SET_LOGIN_STATUS, false)
    },
}
const getters = {
    loginStatus: state => state.loginStatus
}

const mutations = {
    [types.SET_LOGIN_STATUS](state, status) {
        state.loginStatus = status
    }   
}
export default {
    state,
    actions,
    getters,
    mutations
}
//User.vue
<template>
    <div class="user">
        <div v-if="!loginStatus">
            ...
        </div>
        <div v-else>    
            ...        
        </div>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
    computed: {
        ...mapGetters([
            'loginStatus'
        ])
    }
}
</script>

 

4. axios

axios是一个http请求包，vue官网推荐使用axios进行http调用。

例子：发送一个GET请求

axios.get('/user?ID=12345')
 .then(function(response){
    console.log(response);
  })
  .catch(function(err){
    console.log(err);
  });
//
以上请求也可以通过这种方式来发送
axios.get('/user',{
  params:{
    ID:12345
  }
})
.then(function(response){
  console.log(response);
})
.catch(function(err){
  console.log(err);
});
2
、
发送一个POST请求
axios.post('/user',{
  firstName:'Fred',
  lastName:'Flintstone'
})
.then(function(res){
  console.log(res);
})
.catch(function(err){
  console.log(err);
});