vuex的一些需要知道的点

Posted 以谦卑,以进取

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vuex的一些需要知道的点相关的知识,希望对你有一定的参考价值。

vuex

核心是 store,包含着应用中的大部分状态
Mutations 存放的是改变 state 的方法,更改store的状态的唯一方法是提交 mutation
Actions 存放的是一些业务逻辑,通常是异步任务。

安装

yarn add vuex

使用

import Vue from ‘vuex’
import Vuex from ‘vuex‘
Vue.use(Vuex)

==推荐使用辅助函数==

  • state
  • Getter
    可以认为是store的计算属性,getter的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。
  • Mutation
    mutation必须是同步函数
  • Action
    通过提交 mutation 实现状态更新,而不是直接更新状态
    可以包含异步操作
  • Module
    模块化状态,对每个模块添加命名空间(重要)

transition

Vue在插入、更新或者删除时,提供多种不同方式的应用过渡效果

<transition
    enter-class=""
    enter-active-class="animated fadeInLeft"
    enter-to-class=""
    leave-class=""
    leave-active-class="animated fadeOutLeft"
    leave-to-class=""
>
    <div class="tmp" v-if="isShow">div</div>
</transition>

动画钩子函数

<transition
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
    v-on:after-enter="afterEnter"
    v-on:before-leave="beforeLeave"
    v-on:leave="leave"
    v-on:after-leave=“afterLeave”
    v-on:leave-cancelled="leaveCancelled"
>
methods:{
    ...
    enter:function(el,done){
        done() // 表示完成动画
    }
}

vue-router

安装

yarn add vue-router

使用

  • 在main.js里
import VueRouter from ‘vue-router‘
Vue.use(VueRouter)
new Vue({
    el:"#app",
    router,
    render:h=>h(App)
})
  • 配置路由
var routes =[
    {path:‘/‘,component:ind},
    {path:‘/msg‘,component:msg},
    {path:‘/hi‘,component:hi}
]

 

界面

<div>
    <router-link to="/">ind</router-link>
    <router-link to="/msg">msg</router-link>
    <router-link to="/hi">hi</router-link>
    <router-view></router-view>
</div>

路由模式

  • history:常用的模式
  • hash:哈希,网址含#
  • abstract:网址不变

路由传参

  • 通过params
{path:"/msg/:id/:msg",component:msg}
<router-link to="/msg/1/2">msg</router-link>

这样的传参通过this.$route.params.age获取

  • 通过query
{path:"/msg",component:msg}
<router-link to="/msg?a=1&b=2">msg</router-link>

编程式导航

this.$router.push("/")
this.$router.push({path:‘/msg‘,query:{a:1,b:2}})

这样的传参通过this.$route.query获取

  • 导航方式总结
声明式导航编程式导航说明
<router-link to="/"> this.$router.push(‘/‘) 向history中添加记录
<router-link to="/" replace> this.$router.replace(‘/‘) 不会向history中添加记录
———— this.$router.go(1) 历史记录中前进一页

params和query传参的区别,params 刷新页面,数据会丢失,解决办法是采用浏览器缓存(sessionStorage和localStorage)或者cookie将数据缓存下来。而query会把数据暴露在地址栏中, 类似get请求。

嵌套路由规则

{
    path:"/list",
    component:List,
    children:[
        {path:"/list/a",component:PageA},
        {path:"/list/b",components:PageB}
    ]
}

keep-alive

<keep-alive>是一个抽象组件,包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们

  • props

    • include:字符串或正则表达式。只有名称匹配的组件会被缓存。
    • exclude:字符串或正则表达式。任何名称匹配的组件都不会被缓存。
    • max:最多可以缓存多少组件实例。
  • keep-alive 提供了两个新的生命周期钩子函数

    • actived:keep-alive 组件激活时调用。
    • deactived:keep-alive 组件停用时调用。

axios

可以添加拦截器,请求拦截器和响应拦截器。在里面可以做 toast 提示

以上是关于vuex的一些需要知道的点的主要内容,如果未能解决你的问题,请参考以下文章

我需要在短时间内学习 vuex,因为我不知道如何将我的 vue js 迁移到 vuex?

如何发布带有 Vuex 模块的 Vue.js NPM 包?

vuex其实超简单,只需3步

VSCode自定义代码片段13——Vue的状态大管家

VSCode自定义代码片段13——Vue的状态大管家

VSCode自定义代码片段13——Vue的状态大管家