vue.js+vue-router创建单页运用

vue.js+vue-router创建单页运用

一、安装

npm install vue-router

二、router的运用

1. 在子组件中监听路由变化

export default {
  name: 'app',
  computed:mapGetters(['loading','shownav']),
  //监听路由的变化
      watch:{
        $route(to,from){
            console.log(to);
            console.log(from);
        }
      },
  components:{
    
  }
}

路由信息对象：$route（只读不可变的，可通过watch检测其变化）

表示当前激活的路由的状态信息，包含了当前url解析得到的信息以及url匹配到的路由记录

路由信息对象出现在多个地方：

• 组件内，this.$route是路由信息对象
• 在$route观察者(watch)回调内
• route.match(location)的返回值

路由信息对象的属性

• $route.path：string。当前路由的绝对路径
• $route.params：Object。
• $route.query：object。Url的查询参数
• $route.fullPath：完整路径
• $route.matched：路由记录
• $route.name：当前路由的名称

三、vuex

1. 安装vuex

Vuex的状态存储是响应的。组件从store中读取状态，若store中的状态发生变化，那么相应的组件也会得到高效更新

//安装
npm install vuex --save

在一个模块化的打包系统中，您必须显式地通过 Vue.use() 来安装 Vuex：
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

2. 创建一个store

另外创建一个目录进行Vuex状态的存储

// 如果在模块化构建系统中，请确保在开头调用了 Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

Vuex通过store选项，提供一种机制状态从根组件注入到每个子组件中(需在根实例中注册store)

Vue.use(Vuex) //注册store前需要进行Vuex的引用
const app = new Vue({
  el: '#app',
  // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
  store,
  components: { Counter }
})

子组件可通过this.$store访问store状态

const Counter = {
  template: `
{{ count }}
`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}

3. 在Vue组件中获得Vuex状态

从store实例中读取状态：

• 计算属性中返回某个状态state

每次状态变化的时候，都会重新求取计算属性，并且触发更新相关联的DOM

const Counter = {
  template: `
{{ count }}
`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}

• mapState辅助函数

当一个组件需要获取多个状态的时候，可使用mapState辅助函数帮助我们生成计算属性

当映射的计算属性的名称与state的子节点名称相同时，我们也可以给mapState传一个字符串数组

4. 从store中的state中派生出一些状态 -- getter

getter可相当于store的计算属性，会根据依赖性被缓存起来

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) //filter是array内置的函数，其必要参数是一个函数，根据函数返回的布尔值进行筛选
    }
  }
})

mapGetters辅助函数

使用对象展开运算符将getter混入computed对象中：

5. 更改Vuex的store中的状态的唯一方法是提交Mutation

• Mutation都有一个字符串的时间类型(type)和一个回调函数(handler)。回调函数就是实际状态更改的地方，并且接受state作为第一个参数。需要以相应的type调用store.commit方法唤醒调用mutation handle

注意：mutation必须是同步函数

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})
store.commit('increment')

• 提交负荷

大多数情况下，载荷应该是一个对象，包含多个字段并 

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

//对象风格的提交方式
store.commit({
  type: 'increment',
  amount: 10
})

• 在组件中提交mutation（需在根节点注入store）

在组件中使用this.$store.commit('xxx')提交mutation

使用mapMutations辅助函数将组件中的method映射为store.commit调用

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

      // `mapMutations` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
  }
}

6. Action

Action类似Mutation，action提交的是mutation而不是直接变更状态，action包含任何异步操作

• Action函数的参数

Action函数，接受一个参数，该参数是一个对象，与store实例具有相同方法和属性

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

• 分发Action -- store.dispath('increment')

// 以载荷形式分发
store.dispatch('incrementAsync', {
  amount: 10
})

// 以对象形式分发
store.dispatch({
  type: 'incrementAsync',
  amount: 10
})

• 在组件中分发Action

在组件中使用this.$store.dispatch('xxx')分发action，或者使用mapActions辅助函数将组件methods映射为dispatch调用

7. Module

Vuex允许将store分割成模块，每个模块拥有自己的state、mutation、action等

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

• 命名空间

可以通过添加 namespaced: true的方式使其成为命名空间模块。当模块被注册后，它的所有getter、action及mutation都会根据模块注册的路径调整命名

const store = new Vuex.Store({
  modules: {
    account: {
      namespaced: true,

      // 模块内容（module assets）
      state: { ... }, // 模块内的状态已经是嵌套的了，使用 `namespaced` 属性不会对其产生影响
      getters: {
        isAdmin () { ... } // -> getters['account/isAdmin']
      },
      actions: {
        login () { ... } // -> dispatch('account/login')
      },
      mutations: {
        login () { ... } // -> commit('account/login')
      },

      // 嵌套模块
      modules: {
        // 继承父模块的命名空间
        myPage: {
          state: { ... },
          getters: {
            profile () { ... } // -> getters['account/profile']
          }
        },

        // 进一步嵌套命名空间
        posts: {
          namespaced: true,

          state: { ... },
          getters: {
            popular () { ... } // -> getters['account/posts/popular']
          }
        }
      }
    }
  }
})