一、Vuex概述

二、基于Vuex的计数器

我们不能直接修改state，需要定义mutation来操作state，示例代码如下所示：

1//store.js 2import Vue from "vue"; 3import Vuex from "vuex"; 4Vue.use(Vuex); 5 6const store =new Vuex.Store({ 7    state:{ 8count:0 9    },10    mutations:{11        increment(state){12state.count++13        }14    }15})1617exportdefaultstore

将store注入到每一个子组件中。

1import Vue from 'vue' 2import App from './App.vue' 3import store from "./store" 4 5Vue.config.productionTip =false 6 7new Vue({ 8  store, 9render: h => h(App),10}).$mount('#app')

组件通过this.$store.commit()方法可以提交mutation，示例代码如下所示：

1 2 3

4+ 5 6 7 8 9exportdefault {10    methods:{11        increment(){12this.$store.commit("increment");13        }14    }15}16

通过this.$store.state可以直接访问state对象，并进一步获取state中的数据

1 2 3

{{number}}

4 5 6 7exportdefault { 8    computed:{ 9        number(){10returnthis.$store.state.count11        }12    }13}14

这样我们就利用Vuex实现了一个简答的计数器功能。

三、简化获取state

1import {mapState} from "vuex"; 2exportdefault { 3// computed:{ 4//    count(){ 5//        return this.$store.state.count 6//    } 7// } 8// computed:mapState({ 9//    count:state=>state.count,10//    fruitList:state=>state.fruitList11// })12computed:mapState(["count","fruitList"])13}

四、官方文档

【融职教育】在工作中学习，在学习中工作