Vuex
概述
- Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。---- 工具，用于管理应用中组件间共享的状态（数据）
- 采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化
概念
- store：仓库，用于集中式管理
- state：状态，应用中组件要共享的数据
- mutation：同步更新状态数据的函数，在 vuex 中仅能提交 mutation 来更新状态数据
- action：和 mutation 类似，但可以包含异步操作，不能直接更新状态，而是要提交 mutation 更新
- getter：是 store 中的计算属性
- module：模块，每个模块可以有自己的 state、mutation、action、getter，甚至自己的 module
使用
- 安装
- npm安装$ npm i [email protected]
- yarn安装$ yarn add [email protected]
- 创建 Store
import Vue from 'vue'
import Vuex from 'vuex'
// 使用核心插件 Vuex
Vue.use(Vuex)
// 创建 Store
const store = new Vuex.Store({
state: {
// 组件间共享的数据
todos: [],
},
mutations: {
// 唯一进行同步更新状态数据的方法
/**
* 添加新待办事项
*/
addTodoItem(state, payload) {
state.todos.push({
id: Math.random(),
title: payload.title,
completed: false,
})
},
},
})
export default store
向根实例中注入 store
import Vue from 'vue'
// 引入 store
import store from './store' // import store from './store/index.js'
new Vue({
store, // 注入 store，这样，在所有后代组件中，都可以使用 this.$store 获取 vuex 的 Store 使用
// render: h => h(App),
}).$mount('#app')
在组件中使用 store
- this.$store.state.todos // 类似于data拿里面数据
- this.$store.commit(mutationType, payload) // 类似于触发事件
- this.$store.getters.allChecked // 类似于计算属性
辅助函数
import {
mapState, mapGetters, mapMutations, mapActions } from 'vuex' // 解构出来vuex仓库中保存的数据
Vue Router
SPA
single page application（单页面应用程序），即在整个应用中，只有一个 html 页面，在用户与应用之间实现交互时能够动态更新页面内容。
前端路由
利用 hash 或 history 改变不会向后端发起新的 html 请求
模式
- hash：利用 URL 中 #hash hash 值改变后，不会发送新的网络请求的特点，来实现的路由。使用如 #/home、#/login 类似的方式来表示所请求的前端 URL 资源
- history：利用 h5 中 history 新增的 API pushState()、replaceState() 来实现。其路由的格式与服务端路由 URL 格式一致（比 hash 模式来说，没有多余的如 # 之类的符号），这种路由模式要用好，还需要服务端配置
- Vue Router是 Vue.js 官方的路由管理器，是一个核心插件，与 Vue.js 高度集成
安装
- npm安装$ npm i [email protected]
- yarn安装$ yarn add [email protected]
定义 VueRouter 对象
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/Home'
import Login from '@/views/Login'
// 使用路由插件
Vue.use(VueRouter)
// 创建 VueRouter 对象
const router = new VueRouter({
mode: 'hash', // 路由模式，可取 hash、history，默认为 hash
routes: [ // 静态路由的配置信息
{
path: '/home', // 当 URL 中访问地址为 /home 时
component: Home, // 拿 Home 组件渲染
},
{
path: '/login',
component: Login,
},
],
})
// 导出路由对象
export default router
在 Vue 组件中使用 VueRouter 时，可使用 VueRouter 提供的两个内置组件：
- router-link：链接，相当于<a>
- router-view：视图，用于渲染访问路径所对应的组件
- 注入 router 到 vue 根实例
// 引入 router
import router from './router'
new Vue({
router,
// render: h => h(App),
}).$mount('#app')
- 当在 Vue 根实例中注入了 router 后，在 vue 组件中会自动注入如下两个属性：
- $router：代表 VueRouter 对象实例
- $route：代表的是当前激活的路由对象
<template>
<div class="app">
<router-link to="/index">首页</router-link>
<button @click="singinHandle">切换登录</button>
<router-view />
</div>
</template>
<script>
export default {
name: 'App',
created () {
this.$watch(
() => this.$route.params,
(toParams, previousParams) => {
console.log(this.$route)
// 对路由变化做出响应...
}
)
},
methods: {
singinHandle () {
// this.$router.push({
// path: '/signin'
// })
this.$router.push({
path: '/singin',
query: {
id: 1
}
})
}
}
}
</script>
<style lang="less" scoped>
</style>