vue全家桶

  • Z时代
  • 2024-01-10
  • 分类：综合

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
见前后端数据通讯篇
 
以上是 vue全家桶 的全部内容，
                        来源链接：
                            utcz.com/z/377201.html
回到顶部