• vuex的mutations传值


    mutations是要通过方法触发的,用于更改store里的数据的。
    this.$store.commit("mutationsName")

    例子:

    store.js

    import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    export const store  = new Vuex.Store({
        state:{
            prod :[
                {name:"zs",age:12},
                {name:"ls",age:13},
                {name:"ww",age:14},
            ]
        },
        getters:{
            getValue(state){
             var item =    state.prod.map(ele=>{
                    return {
                        name:ele.name+"__技术部",
                        age:ele.age+10
                    }
                })
                return item ;
            }
        },
        mutations:{
            getVal(state){
            var items =     state.prod.map(ele=>{
                    return {
                        age:ele.age+=4
                    }
                })
                return items;
            }
        }
    })

    Home.vue

    <template>
    <div>
        <table>
            <tr>
                <td>姓名</td>
                <td>年龄</td>
            </tr>
            <tr v-for="(item,i) in getValue">
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
            </tr>
        </table>
    
        <hr>
         <table>
            <tr>
                <td>姓名</td>
                <td>年龄</td>
            </tr>
            <tr v-for="(item,i) in getVal">
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
            </tr>
        </table>
    
        <button @click="getMutaions()">加4</button>
    </div>
    </template>
    <script>
    export default {
      name: "Home",
      data () {
        return {
        };
      },
      methods:{
          getMutaions(){
              this.$store.commit("getVal"); // 这里不用return的
          }
      },
      computed:{
          getValue(){
              return this.$store.state.prod
          },
          getVal(){
              return this.$store.getters.getValue
          }
      }
    }
    </script>
    <style lang="css" scoped>
    </style>
  • 相关阅读:
    Makefile 使用总结(转)
    linux,pthread(转)
    Java中this和super的用法总结
    「转」开发十年,只剩下这套Java开发体系了
    js的function立即执行函数
    什么是回调函数
    算法总结:双指针法的常见应用
    26. Remove Duplicates from Sorted Array
    1. Two Sum
    Spring的依赖注入和控制反转
  • 原文地址:https://www.cnblogs.com/luguankun/p/10785189.html
Copyright © 2020-2023  润新知