zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    用OFC画多条曲线
    C# 写Windows服务
    asp.net遍历文件夹和文件
    Sqlserver常用函数收集之truncate table
    如何构建多用户商城
    asp.net 获取客户端IP
    Jquery从头学起第四讲
    c#相对路径和系统路径
    JQuery获取URL
    【转】 ASP.NET session 保存到数据库
  • 原文地址:https://www.cnblogs.com/luguankun/p/10785189.html
Copyright © 2011-2022 走看看