1. 程式人生 > >vuex的getters處理數據

vuex的getters處理數據

數據 style this mage div span lan css put

getters是用來處理state裏的數據的

getters傳遞一個值state

例子:

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,index)=>{ return { name:ele.name+"__技術部", age:ele.age+10 } }) return item ; } } })

Home.vue

<template>
<div>
    <table>
        <tr>
            <th>姓名</th>
            <th>年齡</th>
        </tr>
        <tr v-for
="(item,i) in getValue"> <td>{{item.name}}</td> <td>{{item.age}}</td> </tr> </table> <hr> <table> <tr> <th>姓名</th> <th>年齡</th> </tr> <tr v-for
="(item,i) in getItem"> <td>{{item.name}}</td> <td>{{item.age}}</td> </tr> </table> </div> </template> <script> export default { name: "Home", data () { return { }; }, computed:{ getValue(){ return this.$store.state.prod; }, getItem(){ return this.$store.getters.getValue } } } </script> <style lang="css" scoped> </style>

結果:

技術分享圖片

vuex的getters處理數據