1、state单一状态树/单一数据源

所有共享的状态全部放到一个store中
在这里插入图片描述

2、vuex-getters的详解使用

2.1、getters的基本使用

在这里插入图片描述

2.2、getters作为参数个传递参数

在这里插入图片描述

2.3、上述代码案例如下所示

在这里插入图片描述

在这里插入图片描述
src/store/index.js

import Vue from 'vue';
import Vuex from 'vuex'

//1、安装插件
Vue.use(Vuex)

// 2、创建对象
const store = new Vuex.Store({
    
    
  state:{
    
    
    counter:10,
    students:[
      {
    
    id:100,name:'why',age:18},
      {
    
    id:101,name:'kobe',age:19},
      {
    
    id:102,name:'James',age:20},
      {
    
    id:103,name:'curry',age:21}
    ]
  },
  mutations: {
    
    
    increment(state){
    
    
      this.state.counter++
    },
    decrement(state){
    
    
      this.state.counter--
    }
  },
  getters:{
    
    
    powerCounter(state){
    
    
      return state.counter * state.counter
    },
    ageMore20(state){
    
    
      return state.students.filter(s => s.age > 20)
    },
    ageMore20length(state,getters){
    
    
      return getters.ageMore20.length
    },
    moreAgeStu(state){
    
    
      // return function(age){
    
    
      //   return state.students.filter(s => s.age > 9)
      // }
      // 简便写法(箭头函数)
      return age => {
    
    
        return state.students.filter(s => s.age>age)
      }
    }
  }
})

// 3、导出store对象
export default store

在这里插入图片描述

src/components/HelloBuex.vue

<template>
  <div>
    <!-- <h2>{
    
    {
    
    $store.state.counter}}</h2> -->
    <h2>{
    
    {
    
    $store.getters.powerCounter}}</h2>
    <!-- <h2>{
    
    {
    
    $store.getters.ageMore20}}</h2>
    <h2>{
    
    {
    
    "年龄大于20的人数："+$store.getters.ageMore20length}}</h2>
    <h2>{
    
    {
    
    $store.getters.moreAgeStu(8)}}</h2> -->
  </div>
</template>

<script>
export default {
    
    
  name: "HelloVuex"
}
</script>

<style>

</style>

src/APP.vue

<template>
  <div id="app">
  <h2>{
    
    {
    
    message}}</h2>
  <h2>{
    
    {
    
    $store.state.counter}}</h2>
  <button @click="subtraction">-</button>
  <button @click="addition">+</button>
  <h2>{
    
    {
    
    $store.getters.powerCounter}}</h2>
  <!-- <h2>{
    
    {
    
    $store.getters.ageMore20}}</h2> -->
  <hello-vuex></hello-vuex>
  </div>
</template>

<script>

import HelloVuex from './components/HelloVuex'

export default {
    
    
  name: 'App',
  components:{
    
    
    HelloVuex
  },
  data(){
    
    
    return{
    
    
      message: '我是APP页面的组件'
    }
  },
  methods:{
    
    
    addition:function(){
    
    
      this.$store.commit('increment')
    },
    subtraction:function(){
    
    
      this.$store.commit('decrement')
    }
  }
}
</script>
<style>
</style>