zoukankan      html  css  js  c++  java
  • Vuex核心属性(上)

    state : 单一状态树(单一数据源),主要是用来存放状态的  如: count:0

    Getters :类似于单个组件里面的计算属性

    mutations : 状态更新的唯一方式: commit mutations   

    主要分为2部分:

      1.字符串的事件类型

      increment(state){state.count++}    在这里面 increment   就是字符串的事件类型

        2.回到函数(第一个参数就是state)

      increment(state){state.count++}   在这里面 (state){state.count++}  就是回调函数

    通过mutations更新,

           通过commit  如:

            increment:function(){

              this.$store.commit('increment')

            }

    关于mutations 提交参数:  可以跟在字符串事件类型后面   参数被称为是mutations的载荷(Payload) 负载的意思

       

    例子:
      //1.这是一根普通的提交方式
      addcount(count){  
              this.$store.commit('incrementCount' , count)
              }
      mutations里面的接收方式:
              incrementCount(state,count){
                state.count += count
              }
    普通方式提交过来的只是   变量
    //2.特殊的提交方式
    //type:存放字符串事件类型           
      addcount(count){
              this.$store.commit({
                type:'incrementCount',          
                count:count
              })
             }
      mutations里面的接收方式:
            incrementCount(state,payload){
              state.count += payload.count
            }

    特殊方式提交过来的参数是个对象 所以应该用对象来接收

    Mutatioin的响应规则

        store中的state  只要定义属性之后,这些属性都会加入到响应式系统中,而响应式系统会监听属性的变化,当属性发生变化时,会通知所有界面中用到该属性的地方,让界面发生变化

        响应式的给数组对象添加一条数据,需要用  state.数组对象名字.push(参数:传过来的那条数据)

     或者单纯的给对象添加一个key跟value  :响应式的添加: Vue.set(state.对象名,key,value)   例子: Vue.set(state.info,'address','广州')

     响应式的删除对象中的某个属性 :   Vue.delete(state.对象名,属性名)  例子: Vue.delete(state.info, 'age')

    Mutation的命名规范问题                 

       在mutation中,官方建议:定义变量名(这样说应该没错)

       在store文件夹中再次创建一个mutations-types.js文件,在该文件中定义变量名  ,举个例子:export const INCREMENT ='increment'

       导出了多条时候,在App.vue文件中接受下: import * as types from "./store/mutations-types";

     这样在App.vue中,我们就可以直接使用types.INCREMENT来放到this.store.commit()中去;

       在store下面的index.js中采用以下的方式:

       先导入mutations-types.js  文件:  import * as types from "./store/mutations-types";

     然后在mutations中就可以按照以下的方式使用了。

    [types.INCREMENT](state){
        state.count++  
    }
    

      

     

  • 相关阅读:
    SQL Server ->> 生成代码把表字段从NULL改为NOT NULL
    Hadoop ->> MapReduce编程模型
    SQL Server ->> 建立linked server到Azure SQL Server
    SQL Server ->> 存储过程sp_rename重命名数据对象
    SQL Server ->> CLR存储过程枚举目录文件并返回结果集
    SQL Server ->> 查看SQL Server备份历史
    SQL Server ->> 生成时间类型的Partition Function和Partition Scheme代码
    SQL Server ->> CLR编程问题汇总
    Hadoop ->> Name node/Data node和Job tracker/Task tracker的区别
    Hadoop ->> Hadoop是什么?
  • 原文地址:https://www.cnblogs.com/a973692898/p/12840964.html
Copyright © 2011-2022 走看看