vuex案例讲解

• 情景：如果你的页面较多，且共享的数据较多，那么你可以使用cuex来管理你的数据

1. 官方文档地址 https://vuex.vuejs.org/guide/state.html
2. 对vuex中元素进行解释

• state：用来存储数据，可读
• mutation：用来定义改变state中数据的方法
• getters：用来对共享数据进行过滤操作
• action：解决异步改变共享数据

     3.  定义事例

//store/index.js定义如下
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        city: "madongmei"   //可以把state理解为一个前端数据库，对应的获取数据的方法是在getters定义的，修改数据的值的方法是在mutations中定义的
    },
    getters: {
        getCity(state) {
            return state.city;
        }
    },
    actions: {
        setCityName({commit,state}, name){
            // 跟后台打交道
            // 调用mutaions里面的方法
            commit("setCity", name);
        }
    },
    mutations: {
        setCityName(state, name) {
            state.city = name;
        }
    }
});
export default store;

   4. 如何使用

 

 5. 如上调用就会发现{{ city }} 被显示为madongmei

 6. 总结使用如下

• this.$store.getters.getCity 按照getCity这个方法执行，获取到state中的city数据
• this.$store.dispatch("setCityName", "beijing") 按照setCityName这个方法执行，会将state中的city更改为北京

 7. 总结

    心态要好，不要惧怕觉得难，把这四个元素如何使用简单使用一次就再也不会有畏惧心理