vue全家桶

Vue两大核心思想：组件化和数据驱动。

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

Vue全家桶系列，包含了vue-router（http://router.vuejs.org），vuex（http://vuex.vuejs.org）， vue-resource（https://github.com/pagekit/vue-resource）。再加上构建工具vue-cli，sass样式,就是一个完整的vue项目的核心构成。

一、Vue-cli是快速构建这个单页应用的脚手架,

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

二、vue-router

安装：

npm install vue-router

在main.js文件中，

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

Vue.use(VueRouter)

三、vuex

vuex为专门为vue.js应用程序开发的状态管理，可以理解为全局的数据管理。

vuex主要由五部分组成：state、getters、action、mutation、modules组成。

import Vuex from vuex

Vue.use(Vuex)

new Vue({
  el: '#app',
  router,
  store,
  components: { Layout },
  template: '<Layout/>'
 })

 1.state

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

可以通过辅助函数mapState把全局的state和getters映射到当前组件的computed计算属性中。

 

computed: {
    count () {
      return this.$store.state.count
    }
  }

 

import { mapState } from 'vuex'

computed: {
  localComputed () { /* ... */ },
  // mix this into the outer object with the object spread operator
  ...mapState({
    // ...
  })

  ...mapState([
  // map this.count to store.state.count
  'count'
  ])

}

 

 

2、getters

Getters will 接收state作为第一个参数。

 

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

 

也可以接收其他getters作为第二个参数

getters: {
  // ...
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}

调用getter：

computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodosCount
  }
}

通过辅助函数mapGetters将store getters映射到当前组件的computed计算属性中。

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
    // mix the getters into computed with object spread operator
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

或者另起名字;

...mapGetters({
  // map `this.doneCount` to `this.$store.getters.doneTodosCount`
  doneCount: 'doneTodosCount'
})

 

3、mutation (mutation只支持操作同步)

 

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

 

mutations: {
  increment (state, payload) {
    state.count += payload.amount  
  }
}

 

store.commit('increment', {
  amount: 10
})

可以通过辅助函数mapMutations把全局的mutation映射到当前组件的methods中。

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment', // map `this.increment()` to `this.$store.commit('increment')`

      // `mapMutations` also supports payloads:
      'incrementBy' // map `this.incrementBy(amount)` to `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // map `this.add()` to `this.$store.commit('increment')`
    })
  }
}

 

2、actions

action支持异步调用（可以调用api），mutation只支持操作同步，并且action提交的是 mutation，而不是直接变更状态。

 

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

 

或通过参数解构：

actions: {
  increment ({ commit }) {
    commit('increment')
  }
}

Action 通过 store.dispatch 方法触发。

可以通过辅助函数mapActions把全局的action映射到当前组件的methods中。。

 

store.dispatch('increment')

import { mapActions } from 'vuex' 
methods: {
    ...mapActions([
      'increment', // map `this.increment()` to `this.$store.dispatch('increment')`

      // `mapActions` also supports payloads:
      'incrementBy' // map `this.incrementBy(amount)` to `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // map `this.add()` to `this.$store.dispatch('increment')`
    })
  }

四、vue-rource

见前后端数据通讯篇