Vuex 中getters的使用

一，Vuex 中getters的使用

 vuex 中的getters 想当于vue中的computed  ，getters是vuex 中的计算属性 ，计算属性写起来是方法，但它是个属性

二，getters 使用案例计数器（代码直接粘贴复制即可用）

import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'
import  logger from 'vuex/dist/logger'// logger 是一个日志插件
Vue.use(Vuex);
// 容器是唯一的
const state={count:0}; // 状态  将统一管理的状态放在state里面
// mutations 里面  这里的目的是更改状态的
const mutations={
  add(state,count){// state 是默认放入的，是指的当前的stroe
    state.count+=count;
  },
  minus(state,count){
    state.count-=count;
  }
};
const getters={// getters 的使用   默认参数就是state  对state里面的状态进行处理
  val:(state)=>state.count%2?'奇数':'偶数'
}
// getters 和mutations 一样需要注册到store 里面
const store= new Vuex.Store({
  state,
  mutations,
  strict:true,
  getters,
  plugins:[logger()],
});

new Vue({
  el: '#app',
  router,
  render: h => h(App),
  store
  // store 被注册到了实例上  所有组件都会有一个属性 this.$store  它指的就是store这个实例
});

<template>
    <div class="count">
      计数器：<button @click="minus">-</button><br>
      <br><br><br>
      当前：{{this.$store.state.count}}<br>
      <br><br><br>
      计数器：<button @click="add">+</button>
      {{$store.getters.val}}
      <!--getters.val 获取val-->
    </div>
</template>

<script>
    export default {
        name: "counter",
      data(){
          return {
            msg:'你好'
          }
      },
      methods:{
        add(){// 提交add的mutation   第一个名字是找store里面的add  第二个参数时载荷即payload
          this.$store.commit('add',2)
        },
        minus(){// 提交add的mutation   第一个名字是找store里面的add  第二个参数时载荷即payload
          this.$store.commit('minus',1)
        }
      },
    }
</script>

<style scoped>
  .count{
    font-size: 20px;
  }
</style>