zoukankan      html  css  js  c++  java
  • 09vuex

    state

    大白话:获取state的值

    vuex中state数据是响应式的。只要state中数据发生变化。vue组件自动更新。

    要想做到响应式

      前提:是在mutaion中定义函数修改state值。

    1. 最好提前在你的 store 中初始化好所有所需属性。

    2. 当需要在对象上添加新属性时,使用 Vue.set(obj, 'newProp', value)就是响应式

    info: {
          name: 'kebe',
          age: 40,
          height: 1.98
        }
    
    //下面
    state.info.name='old-old-kebi' //修改已有的值还是响应式
    state.info.address='beijing'//增加新的属性和值。该属性不是响应式。state.info确实增加了adderss属性。但是html试图不会发生变化。
    state.info['id']=100 //不是响应式
    Vue.set(state.info,'sex','男') //通过vue.set()增加属性和值就是响应式的

    mapState

    不管用不用mapState辅助函数,vue当前实例访问store.state数据都是在 cumputed计算属性内。

    注意:进入到计算属性computed的属性。vue实例可以直接使用。同data数据一样。

    mapState通过扩展运算符将store.state.属性 映射this.属性 this.指代当前vue实例对象。

    //store.js
    state: {
        count: 100,
        str: 'abc',
        student: [
          { name: 'zs', age: 10 }, 
          { name: 'lisi', age: 30 },
          { name: 'ww', age: 30 },
          { name: 'zq', age: 20 }
        ]
      },
    
    没用mapState之前 **当前vue实例取store.state.属性** 数据是这样的
    //computed
    count(){
        return this.$store.state.count
    },
    str(){
            return this.$store.state.str
    },
     student(){
                return this.$store.state.student
     },
    
    import { mapState, mapMutations, mapGetters } from "vuex";
    //方式1数组形式。这样当前vue实例上就有了count,str,student属性。值就是对应的值。
    ...mapState(['count','str','student']),
        
    //方式2对象形式 不一定要同名  
     //不可以这样写 ...mapState({ count,str, student}),
      ...mapState({ count: "count", str: "str", student: "student" }),
        
    //或者 `state => state.count` 等同于 上面的'count'
    ...mapState({ count: state => state.count, student: "student" }),

    getters

    大白话:获取state的值

    Vuex 允许我们在 store 中定义“getter”(可以认为是 store 的计算属性computed)。就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。

     

    getters里面函数fn形参依次是(state,getters)最多只接受两个参数。

    getters: {
        //getters里面的方法接收一个state参数,指向state,可直接调用state中的数据
        getMore20(state){
            //直接返回一个值
          return state.student.filter(element=>element.age>20)
        },
        //getters 也可以接受其他 getter 必须是作为第二个参数:
        getMore20Length(state,getters){
            //直接返回一个值
          return getters.getMore20.length
        },
         // 用户想传参就返回一个函数
        getMoreAge(state) {
            //返回一个函数。
          return age => state.student.filter(element => element.age > age)
        },
            
         getMoreAgeLen(state,getters){
             // return getters.getMoreAge.length
              return age=>state.student.filter(element=>element.age>age).length
         },
      }

    不用mapgetters

    computed: {
      getMore20() {
          return this.$store.getters.getMore20;
        },
        getMore20Length() {
          return this.$store.getters.getMore20Length;
        },
        getName() {
          return this.$store.getters.getName;
        },
        getMoreAge() {
          return this.$store.getters.getMoreAge;
        },
        getMoreAgeLen() {
          return this.$store.getters.getMoreAgeLen;
        },
    }

    use

    import {mapGetters } from "vuex";
    
    ...mapGetters({
        getMore20:'getMore20',
        getMore20Length:'getMore20Length',
        getMoreAge:'getMoreAge',
        getMoreAgeLen:'getMoreAgeLen'
    }),
    //数组写法
    ...mapGetters(['getMore20','getMore20Length','getMoreAge','getMoreAgeLen',]),
    <h4>{{getMore20}}</h4>
    <h4>{{getMore20Length}}</h4>
    <h3>{{getMoreAge(20)}}</h3>
    <h3>{{getMoreAgeLen(20)}}</h3>

    mutions

    大白话:同步修改state的值  写在vue 实例methods里面

    更改 Vuex 的 store 中的状态(值)的唯一方法是提交 mutation。

    Vuex 中的 mutation 非常类似于事件 methods:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数:

    add是事件类型。

    一条重要的原则就是要记住 mutation 必须是同步函数

    //store.js 在mutations中修改state
    
    mutations: {
        add(state){
          state.count+=5
        },
        decrease(state){
          state.count-=5
        },
        // 提交载荷(接受其他参数),在大多数情况下,载荷是一个对象
        addNum(state,payload){
          state.count+=payload.num
        },
        decreaseNum(state,payload){
          state.count-=payload.num
        },
    }

    不用mapMutation。在methods里面通过this.$store.commit('xxx') 提交 mutation

     add(){
          this.$store.commit('add')
        },
        decrease(){
          this.$store.commit('decrease')
        },
            //注意:是在这里提交payload和mapMutation提交payload位置不同
        addNum(){
          this.$store.commit('addNum',{num:this.num}) //num是自己从data里面取出来的,
        },
        decreaseNum(){
          this.$store.commit('decreaseNum',{num:this.num})
        },
    <button @click="add">add</button>
    <button @click="decrease">jianfa</button>
    <button @click="addNum">addNum</button>
    <button @click="decreaseNum">decreaseNum</button>

    mapMutation

    使用mapMutation 同样两种方式。优先选择对象方式。

    //对象方式
    ...mapMutations({
        add:'add',
        decrease:'decrease',
        addNum:'addNum',
        decreaseNum:'decreaseNum'
    })
    //数组方式
    ...mapMutations(['add','decrease','addNum','decreaseNum'])

    使用 注意payload是在html中传的。

    <button @click="add">add</button>
    <button @click="decrease">jianfa</button>
    <button @click="addNum({num:10})">addNum</button> //留心payload
    <button @click="decreaseNum({num:10})">decreaseNum</button>
  • 相关阅读:
    span i s等行内元素标签之间出现奇怪空格符号
    使用electron搭建桌面app的简便方法
    antd card 组件实现鼠标移入移出效果
    事物处理
    最近在做支付宝支付,在本地测试一切正常,上传到服务器就遇到报错:
    tp框架报错 Namespace declaration statement has to be the very first statement in the script
    前后端分离开发,跨域访问的apche设置
    thinkphp 同一字段不同查询条件实现
    Redis-server在windows下闪退
    tp volist需要便利两个数组时的处理办法
  • 原文地址:https://www.cnblogs.com/xiaoliziaaa/p/13094739.html
Copyright © 2011-2022 走看看