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: `<div>{{ count }}</div>`,
computed: {
count () {
return this.$store.state.count
}
}
}

3. 在Vue组件中获得Vuex状态
从store实例中读取状态：

计算属性中返回某个状态state
每次状态变化的时候，都会重新求取计算属性，并且触发更新相关联的DOMconst Counter = {
template: `<div>{{ count }}</div>`,
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']
}
}
}
}
}
})