vue vuex mapGetters

新建vue项目

 main.js

import Vue from 'vue'
import App from './App.vue'
import store from "@/store";

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
  store
}).$mount('#app');

app.vue

<template>
  <div id="app">
    <h1>根组件
      - {{ $store.state.title }}
      - {{ $store.state.count }}
      -- {{ title }}
      -- {{ count }}
    </h1>
    <input type="text" placeholder="请输入标题" v-model="newTitle" id="t1">
    <input type="text" placeholder="请输入数字" :value="count" @input="handleInput" id="num">
    <son-a :newTitle="newTitle"></son-a>
    <hr>
    <son-b></son-b>
  </div>
</template>

<script>
import SonA from "@/components/SonA"
import SonB from "@/components/SonB"
import { mapState} from 'vuex'

export default {
  name: 'App',
  data(){
    return {
      newTitle:''
    }
  },
  methods:{
    handleInput(e){
      //实时获取输入框的值
      console.log(+e.target.value);
      const num = +e.target.value;
      //提交mutation函数，修改
      this.$store.commit('changeCount',num);
    }
  },
  components:{
    SonA,
    SonB
  },
  computed:{
    ...mapState(['count','title'])
  },
  created() {
    //检查vuex是否安装成功
    console.log(this.$store);
    console.log(this.$store.state.count);
  }
}
</script>

<style>

</style>

index.js

//存放是vuex的相关代码
import Vue from 'vue'
import Vuex from 'vuex'
//插件安装
Vue.use(Vuex);
//创建仓库
const store = new Vuex.Store({
    //通过state可以提供数据
    //严格模式，上线时需要关闭，否则影响性能
    strict:true,
    state:{
        title:'仓库大标题',
        count:100,
        list:[1,2,3,4,5,6,7,8,9,10]
    },
    //通过mutation，可以提供修改数据的方法
    mutations:{
        //加法，第一个参数，都是state
        addOne(state){
            state.count += 1;
        },
        addFive(state){
            state.count += 5;
        },
        addCount(state,n){
            state.count += n;
        },
        changeTitle(state,newTitle){
            state.title = newTitle;
        },
        subCount(state,n){
            state.count -= n;
        },
        changeCount(state,newCount){
            state.count = newCount
        }

    },
    // 3 actions 异步处理
    // actions中不能直接操作state，也是需要提交mutation
    actions:{
        changeCountAction(context,num){
            //这里settimeout是模拟发后台异步处理
            setTimeout( () => {
                context.commit('changeCount',num);
            },1000);

        }
    },
    //类似于计算属性
    getters:{
        //第一个参数就是state
        //必须由返回值，
        filterList(state){
            return state.list.filter( item => item > 5);
        }
    }

});

//导出给main.js使用
export default store;

//获取store
// 1 this.$store
// 2 import 导入 store

//模板中 {{ $store.state.xxx}}
//组件逻辑中 this.$store.state.xxx
//js模板中 store.state.xxx

SonA.vue

<template>
    <div class="box">
        <h2>SonA子组件</h2>
        从Vuex中获取的值: <label for="">{{ $store.state.count }}</label>
        <br>
        <button @click="addOne">值 + 1</button>
        <button @click="addFive">值 + 5</button>
        <button @click="handleAdd(10)">值 + 10</button>
        <button @click="handleAdd(20)">值 + 20</button>
        <button @click="changeFn">改标题</button>
        <button @click="handleChange">一秒后修改666</button>
        <hr>
        <div>
            {{ $store.state.list }}
        </div>
        <div>
            {{ $store.getters.filterList }}
        </div>
    </div>
</template>

<script>
    export default {
        name: "SonA",
        //父传子
        props:{
          newTitle: String
        },
        methods:{
            handleAdd(n){
                //错误代码,不可以这样使用
                //this.$store.state.count++

                //应该通过mutation核心概念，进行数据修改
                this.$store.commit('addCount',n);
            },
            addOne() {
                //加1
                this.$store.commit('addOne');
            },
            addFive(){
                //加5
                this.$store.commit('addFive');
            },
            changeFn(){
                //改标题
                this.$store.commit('changeTitle',this.newTitle);
            },
            handleChange(){
                this.$store.dispatch('changeCountAction',666);
            }
        }
    }
</script>

<style scoped>
    .box{
        border: 2px solid #cccccc;
        width: 400px;
        padding: 10px;
        margin: 20px;
    }


</style>

SonB.vue

<template>
    <div class="box">
        <h2>SonB子组件</h2>
        从vuex中获取的值：<label for="">{{ count }}</label>
        <br>
        <button @click="handleSub(1)">值 - 1</button>
        <button @click="subCount(5)">值 - 5</button>
        <button @click="subCount(10)">值 - 10</button>
        <button @click="changeTitle('前端程序员')">改标题</button>
        <button @click="changeCountAction(888)">一秒后改成888</button>
        <hr>
        <div>
            {{ filterList }}
        </div>
    </div>
</template>

<script>
    import { mapState, mapMutations, mapActions, mapGetters} from 'vuex'

    export default {
        name: "SonB",
        computed:{
            //展开数据，形成同名计算属性
            ...mapState(['count']),
            //展开访问器，类似计算属性
            ...mapGetters(['filterList']),

        },
        methods:{
            //展开修改方法，
            ...mapMutations(['subCount','changeTitle']),
            //展开异步方法
            ...mapActions(['changeCountAction']),
            handleSub(n){
                this.$store.commit('subCount',n);
            }
        }
    }
</script>

<style scoped>
    .box{
        border: 2px solid #cccccc;
        width: 400px;
        padding: 10px;
        margin: 20px;
    }


</style>