Vuex

作者: 5吖 | 来源:发表于2019-03-19 15:18 被阅读0次

一、vuex之store

1、vuex 定义

管理状态 + 共享数据 ,在各个组件间管理外部状态

2、使用

a、引入vuex,并通过use方法使用它

b、创建状态仓库

c、通过this.$store.state.xxx 直接拿到需要的数据

//创建状态仓库,切记 Store(首字母一定要大写),state 不能改
var store = new Vuex.Store({
    state:{
        XXX:xxx //XXX是方法名
    }
})
    
// 直接通过 this.$store.state.XXX  拿到 全局状态

二、vuex 状态管理流程

1、状态管理流程

view ——­> actions ——­> mutations ——­> state ——­> view

三步曲

a、首先视图接收到信号,走actions

b、走完actions之后,才会走mutations

c、通过mutations来直接操作 state ,改变状态

小总结

mutations直接操作state,actions操作mutations

其中在这过程中actions 是可有可无的
如果有actions,先actions,然后mutations
如果没有actions,直接mutations,但是有异步操作,必须走actions

2、改变状态

//创建状态仓库,切记 Store(首字母一定要大写),state 不能改
var store = new Store({
    state:{
        XXX:xxx //XXX是方法名
    },
    mutations:{
       .....
    }
})
    
this.$store.commit(XXX) //此处的XXX是你在mucations中定义的方法名
    
var store = new Vuex.Store({
    state:{// state 是 存放定义的状态
      num:88 //定义的状态
    },
  
    mutations:{//改变定义的状态
      increase:function(state){
        state.num++
      },
  
      decrease(state){//es6写法
        state.num-=20
      }
    },
  
    actions:{ //context为上下文对象
        decreaseAction:function(context){
          
          context.commit('decrease')
          //actions中只能对mutation进行操作
//也就是说,decrease一定是 mutations中定义的,才可以使用
              
          //异步操作一定要写在action中 
          // setTimeout(() => {
          //   context.commit('decrease')
          // }, 1000);
        }
    },
  
    getters:{
      getNum(state){
        return state.num > 0 ? state.num : 0
      }
    }
  
 }) 

3、如何调用

export default {
    name: 'parent',
    data:function(){
        return {
            toSonMsg: '我是你的父亲',
            fromSonMsg:''
        }
    },
    components:{
        son
    },
    methods:{
        getMsgFromSon:function(value){
            this.fromSonMsg = value
        },
        padd(){
            this.$store.commit('increase')
        },
        paddaction(){
            this.$store.dispatch('decreaseAction')
        }
    },
    computed:{
        getCount:function(){
            // return this.$store.state.num
            return this.$store.getters.getNum
        }
    }
}

4、 mutations VS actions

a、 接收的参数不一样

​ mutations的参数:state (可以直接传状态)
​ actions 的参数:context(只能是上下文对象)

b、 调用的方法不一样

​ mutations:this.$store.commit('XXX')
​ actions:this.$store.dispatch('XXX')

c、里面包含的函数要求不一样

​ actions:可以包含异步操作
​ mutations:只能包含同步操作

相关文章

  • VUEX基本介绍,包含实战示例及代码(基于Vue2.X)

    VUEX 1 VUEX基本介绍 1.1 官方API 1.2 什么是vuex 1.3 Vuex使用场景 1、Vuex...

  • 【文档笔记】-Vuex

    什么是vuex? vuex文档: https://vuex.vuejs.org/zh/[https://vuex....

  • vuex配置

    vuex配置 目录 vuex的五个核心 配置vuex vuex持久化 一、vuex五个核心概念 State 定义状...

  • Vuex

    安装Vuex cnpm install vuex --save-dev Vuex是什么? 这是[Vuex的官网](...

  • Vuex

    1.Vuex概述 2.Vuex基本使用 3.使用Vuex完成todo案例 1.Vuex概述 Vuex是实现组件全局...

  • vuex

    Vuex介绍: Vuex官网:http://vuex.vuejs.org/ Vuex是实现数据状态管理的技...

  • vuex+axios 的开发流程记录

    相关文档 vuex: https://vuex.vuejs.org/zh/ 是否有必要使用vuex vuex是vu...

  • 2019-06-07

    import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)...

  • 配置 vuex 和 vuex 本地持久化

    配置 vuex 和 vuex 本地持久化 目录 vuex是什么 vuex 的五个核心概念State 定义状态(变量...

  • vuex

    配置 vuex 和 vuex 本地持久化 目录 vuex是什么 vuex 的五个核心概念State 定义状态(变量...

网友评论

      本文标题:Vuex

      本文链接:https://www.haomeiwen.com/subject/mifgmqtx.html