vuex是什么?

  1. vuex是专为vue.js应用程序开发的状态管理模式
  2. 它采用集中式存储管理应用所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化
  3. vuex也集成到vue的官方调式工具devtools extension

状态管理到底是什么?

  1. 说简单点就是把需要多个组件共享的变量全部存储到一个对象里面,然后将这个对象放到顶层的实例中,让其他组件可以使用
  2. 为什么我们不自己封装一个对象来管理呢?
  • 因为封装在vuex里面的数据能够直接做到响应式

什么时候用vuex

  1. 当多个视图都依赖同一个状态的时候

vuex基本使用

  1.  在src目录下创建文件夹store,并且创建一个index.js文件,
    import Vue from 'vue'
    import Vuex from 'vuex'
    // 1.安装插件
    Vue.use(Vuex)
    //创建实例
    const store = new Vuex.Store({
    state:{
    count:0
    },
    mutations:{
    increment(state){
    state.count++
    }
    }
    })
  2.    然后让所有Vue组件都能使用这个store对象
    来到main.js文件,导入store对象,并放到new Vue中
    这样,其他组件就可以通过this.$store的方式,获取到这个store对象了
    import Vue from 'vue'
    import App from 'App'
    import store from './store'
    new Vue({
    el:'#app',
    store,
    render:h=>h(App)
    })
  3.  使用vuex中的count
    通过this.$store.state.属性的方式来访问状态
    通过this.$store.commit('mutatiom中方法')来修改状态
  4. 注意事项:
  • 我们通过提交mutation的方式,而非直接改变store.state.count
  • 这是因为vuex可以更明确的追踪状态的变化,所以不要直接改变store.state.count的值

vuex中的几个核心的概念

  • state
  • getters
  • mutations
  • actions
  • module

state

  • 存放共享源数据
  • 数据的修改不在此进行

getter

  •   有时候我们需要从store中获取一些state变异后的状态
    如:有一组对象数据,我么要获取年龄大于20岁的个数
    getters:{
    greaterAgestu:state=>{
    return state.students.filter(s => s.age>=20)
    }
    }
    getter默认不能传递参数,如果要传参,只能让getters本身返回另一个参数
    如:根据ID获取用户信息
    getters:{
    stuByid:state=>{
    return id=>{
    return state.students.find(s=> s.id===id)
    }
    }
    }

mutation

  • vuex中store状态更新唯一方式:提交Mutation
  • mutation的主要两部分:1.字符串的事件类型(type) 2.回调函数(handler),该回调函数的第一个参数就是state
  1.  mutations的定义
    mutations:{
    increment(state){
    state.count++
    }
    }
    组件中通过mutation更新
    increment:function(){
    this.$store.commit('increment')
    }
  2.   mutation传递单个参数
    decrement:funtion(){
    this.$store.commit('decrement',2)
    } decrement(state,n){
    state.count -= n
    } mutation传递多个参数
    使用对象this.$store.commit('decrement',{count:0})
    在用payload对象取出相关信息
    decrement(state,payload){
    state.count =payload.count
    }
  3.  mutation的另一种提交风格(type对象属性)
    this.$store.commit({
    type:'changeCount',
    count:100
    }) Mutation中的处理方式是将整个commit的对象作为payload使用, 所以代码没有改变
    changeCount(state,payload){
    state.count =payload.count
    }
  4.  mutation的常量类型:
    1.在mutation中, 我们定义了很多事件类型(也就是其中的方法名称)
    2.方法过多, 使用者需要花费大量的经历去记住这些方法, 甚至是多个文件间来回切换, 查看方法名称, 甚至如果不是复制的时候, 可能还会出现写错的情况. 如何解决:
    1.我们可以创建一个文件: mutation-types.js, 并且在其中定义我们的常量
    2.定义常量时, 我们可以使用ES2015中的风格, 使用一个常量来作为函数的名称. 具体实现:
    mutation-types.js文件中
    export const UPDATE_INFO = 'UPDATE_INFO' 在vuex的index.js文件中
    引入:import * as types from './mutation-types' 使用:[UPDATE_INFO](state,payload){ } 在组件中
    引入:import {UPDATE_INFO} from './store/mutation-types'
    使用:直接使用UPDATE_INFO
  5. 当有异步操作的时候,不要使用mutation,使用actions,因为当使用mutation时,官方插件devtools监控不到异步操作

actions

    • 但是某些情况, 我们确实希望在Vuex中进行一些异步操作, 比如网络请求, 必然是异步的. 这个时候怎么处理呢?
    • Action类似于Mutation, 但是是用来代替Mutation进行异步操作的.
  1.  mutation和action对比
    mutation:{
    increment(state){
    state.count++
    },
    action:{
    increment(context){
    context.commit('increment')
    }
    }
    } context是什么?
    context是和store对象具有相同方法和属性的对象.也就是说, 我们可以通过context去进行commit相关的操作, 也可以获取context.state等. 在Vue组件中, 如果我们调用action中的方法,那么就需要使用dispatch (同样也支持传递payload对象属性)
    methods:{
    increment(){
    this.$store.dispatch('increment',{count:5})
    }
    } mutations:{
    increment(state,payload){
    state.count += payload.count
    }
    }
    actions:{
    increment(context,payload){
    setTimeout(()=>{
    context.commit('increment',payload)
    },5000)
    }
    }
  2.  在Action中, 我们可以将异步操作放在一个Promise中, 并且在成功或者失败后, 调用对应的resolve或reject.
    actions:{
    increment(context){
    return new Promise((resolve)=>{
    setTimeout(()=>{
    context.commit('increment')
    resolve()
    },1000)
    })
    }
    } methods:{
    increment(){
    this.$store.dispatch('increment').then(res=>{
    console.log('完成了更新操作')
    })
    }
    }

midule

  1.  Vue使用单一状态树,那么也意味着很多状态都会交给Vuex来管理.
    当应用变得非常复杂时,store对象就有可能变得相当臃肿.
    为了解决这个问题, Vuex允许我们将store分割成模块(Module), 而每个模块拥有自己的state、mutations、actions、getters等 const moduleA ={
    state:{...},
    mustation:{...},
    ....
    } const store =new Vuex.Store({
    modules:{
    a:moduleA
    b:moduleB
    }
    })
  2. Module局部状态

  • 我们在moduleA中添加state、mutations、getters
  • mutation和getters接收的第一个参数是局部状态对象
  • 虽然, 我们的doubleCount和increment都是定义在对象内部的
  • 但是在调用的时候, 依然是通过this.$store来直接调用的.
  1.  actions的写法呢? 接收一个context参数对象
    局部状态通过 context.state 暴露出来,根节点状态则为 context.rootState
    const moduleA ={
    //...
    actions:{
    incrementInfoRootSum({state,commit,rootState}){
    if((state.count + rootstate.count)%2 ==1 ){
    commit('increment')
    }
    }
    }
    }
  2. 最后抽取store中的各个对象到各个文件,在进入导入,来完成最后清晰的项目结构

vuex的学习的更多相关文章

  1. 【整理】解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function

    解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function https://www.cnblogs.com/jaso ...

  2. vuex的学习笔记

    什么是Vuex? vuex是一个专门为vue.js设计的集中式状态管理架构.状态?我把它理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态.简单的说就是data中需要共用的属性. ...

  3. vuex的学习例子

    最近在学习vuejs,一直有听说vuex,用来实现多组件共享的一种状态管理模式,但是网上都说,不要为了用vuex而用vuex,大概意思就是尽量少用vuex,一些小项目可以用bus来实现组件之间的传值问 ...

  4. 解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function

    Vue的项目中,如果项目简单, 父子组件之间的数据传递可以使用  props 或者 $emit 等方式 进行传递 但是如果是大中型项目中,很多时候都需要在不相关的平行组件之间传递数据,并且很多数据需要 ...

  5. vuex的学习和理解

    初识Vuex: vuex是 vue官方推荐的一个状态管理器,也是vue专用的一个插件.当我们遇到很多状态改变时,组件之间的通信就会变得复杂,这时候vuex的强大就体现出来了. Vuex 应用的核心就是 ...

  6. Vuex的学习笔记一

    以下的解释,是在知乎看到的,感觉粗俗易懂. 组件之间的作用域独立,而组件之间经常又需要传递数据. A 为父组件,下面有子组件 B 和 C. A 的数据可以通过 props 传递给 B 和 C.A 可以 ...

  7. vuex - 辅助函数学习

    官网文档: https://vuex.vuejs.org/zh-cn/api.html  最底部 mapState 此函数返回一个对象,生成计算属性 - 当一个组件需要获取多个状态时候,将这些状态都声 ...

  8. vue使用--vuex快速学习与使用

    什么是vuex? Vuex核心概念 Vuex安装与使用 1.安装 2.目录结构与vuex引入 3.store中变量的定义.管理.派生(getter) 4.vuex辅助函数的使用说明 Vuex刷新数据丢 ...

  9. vuex使用心得分享(填坑)

    今天我们简单说一下vuex的使用,vuex是什么呢,相当于react的redux,如果项目使用数据过多的话,直接管理是非常不方便的,那么采用vuex,那些繁琐的问题就迎刃而解了,首先我们先看看官方对v ...

随机推荐

  1. Vue中无法检测到数组的变动

    本周在写项目中遇到修改数组中的值时,视图无变化问题.在查阅Vue官方文档后了解到,由于由JavaScript 的限制,Vue 不能检测以下数组的变动: 当利用索引直接设置一个数组项时,例如:vm.it ...

  2. 人生苦短,我用Python(1)

    1.Python保留字与标识符 保留字是Python语言中一些已经被赋予特定意义的单词,开发程序时,不可以把这些保留字作为变量.函数.类.模块和其他对象的名称来使用. and as assert br ...

  3. 关于java反射里的.class、.getClass()、Class.Forname()

    博主在研究java反射这一章节时,曾被三个方法困扰多时,.class..getClass().Class.Forname(),先上代码 这是类A package cn.yonyong.net.tcp. ...

  4. PHP ftp获取目录内容为空

    使用PHP的ftp函数获取目录内容,ftp_nlist()和ftp_rawlist()返回都为空. 查了一圈资料找不到答案,然后用Python写了一个,一样的操作就可以获取目录内容. 抓包发现,Pyt ...

  5. .NET 中数据访问用的 DBHelper(Sql Server) 类

    public class DBHelper { private static string DBConnectString = "Data Source=.;Initial Catalog= ...

  6. NodeJS3-1基础API----Path(路径)

    path 和路径有关的操作 Path(路径)  path 模块提供用于处理文件路径和目录路径的实用工具. 它可以使用以下方式访问 const path = require('path');  1. p ...

  7. 知识图谱推理与实践(3) -- jena自定义builtin

    在第2篇里,介绍了jena的The general purpose rule engine(通用规则引擎)及其使用,本篇继续探究,如何自定义builtin. builtin介绍 先回顾builtin为 ...

  8. C#mvc重新定向并在路径中使用html扩展名实现伪静态

    首先修改配置文件,增加下面的两个配置: 接下来,修改MapRoute为路由增加.html后缀 完成后,我们来验证一下刚才的成果: http://localhost:2279/Home/.html 一个 ...

  9. Aery的UE4 C++游戏开发之旅(2)编码规范

    目录 C++基础类型规范 命名规范 头文件规范 字符串规范 字符集规范 参考 C++基础类型规范 由于PC.XBOX.PS4等各平台的C++基础类型大小可能不同(实际上绝大部分都是整型类型的大小不同) ...

  10. C语言函数调用过程,汇编角度查看

    C语言函数调用过程,汇编角度查看 把函数的参数按照调用约定压栈或者存储到寄存器中 调用要使用的函数,先把调用者的地址入栈,方便回来 跳转到函数 把函数使用到的一些寄存器压栈,避免修改寄存器的值 执行函 ...