(四)getters 在获取到公共数据后操作

本节知识点

• 利用getters直接在vuex中操作数据

使用指南

• (1) 在vuex 文件中也就是store.js中写下面代码,重点就是getters

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const start = 10;

function jisuan(){
  return start+10;
}

const state={
  score:jisuan()
};
const mutations = {
    add:function(state,n){state.score+=n;},
    del:function(state,n){state.score-=n;}
};
const getters = {
  score:function(state){
         return state.score+=10;
  }
}
export default new Vuex.Store({
  state,
  mutations,
  getters
})

• (2) 在模板中使用getters

<template>
    <div>
       <div>
         {{msg}}
       </div>
      <div>
         分数是{{$store.state.score}} --这个就是mapState属性{{score}}--计算后的getter {{$store.getters.score}}
      </div>
      <div>
        <button @click="$store.commit('add',5)">添加</button>
        <button @click="$store.commit('del',5)">减少</button>
      </div>
    </div>
</template>

<script type="text/ecmascript-6">
  import store from "@/vuex/store";
  import {mapState} from "vuex";
    export default {
         data(){
           return {
             msg:"测试vuex"
           }
         },
         store,
        computed: mapState(["score"])
    }
</script>
<style scoped>
</style>