vue--store中各个属性

Posted 2023-04-18

参考技术A <select v-model="xueli" @change="changeFn">

      <option value="0">请选择学历</option>

      <option value="1">大专</option>

      <option value="2">本科</option>

    </select>

如上述，xueli绑定的值是字符串1，2，3，如改成如下加上v-bind的形式，数据监测的值为数字

<option v-bind:value="1">请选择学历</option>

或者v-model.number="xueli" 也可以完成相同的要求

vux-getters

getters: /* 计算组件中数据，可以对其二次加工，类似computed */

  /* 具有缓存功能，如果state中的数据得到了改变，那么getters中的属性也会发生改变， 反之则不会改变 */

  getDazhuan:function(state)

    return state.list.filter(r=>r.xueli=='大专')

 

getter中的数据，组件可以使用this.$store.getters.getDazhuan获取

state中的数据，组件可以使用this.$store.state.list获取

组件可以在methods中创建事件，利用commit传值给mutations或者dispatch传值给actions

methods:

del()

      this.$store.commit('DELNUM',this.num)

       ,

    add()

      this.$store.dispatch('addajax',this.num)     括号中两个参数，第一个表示事件名，第二个是传参

             

mutations:

 DELNUM:function(state,payload)

    state.num-=payload

  ,

  ADDNUM:function(state,data)

    state.num+=data

  ,

actions: /* 调后台接口并commit提交一个mutations

               里面的方法用小写为了区分mutations里面的方法*/

            /* 异步请求要放在actions方法中去写 ，不要再组件中去写，不然起不到作用 */  

            addajax(commit,data)

              /* 使用解构出来的commit方法来提交一个mutation方法ADDNUM来修改state中的值 */

              setTimeout(()=>                           异步请求

                commit('ADDNUM',data)            触发$sotre.mutations中的ADDNUM方法

              ,500)

           

  ,

导出vuex中的mapState,mapGetters方法

import mapState,mapGetters from 'vuex'

 computed:

    /* 利用mapState方法使用拓展运算符把list,getDazhuan解构在计算属性中 */

   mapState(['list'])

   mapGetters(['getDazhuan','getBenke']) 



插值中可以直接用list,getDazhuan,getBenke表示

vue实例中可以直接用this.list,this.getDazhuan,this.getBenke表示

@NgModule 中各个属性详解

@NgModule：元数据描述。在angular中module是使用@NgModule修饰的class。

@NgModule中属性详解：

providers：定义此模块的注入器中可用的一组注入对象。指定应用程序的根级别需要使用的service。

declarations：指定属于此模块的指令或者是管道列表。

imports：导入其他的module，其他module暴露在exports下面的指令或者管道列表可以在 本模块中使用。

exports：指定可以在导入此模块的Angular模块中使用的指令或管道或模块列表。

bootstrap：通常是app启动的根组件，一般只有一个component。bootstrap中的组件会自动被放入到entryComponents中。