Vue Vuex基础笔记

刚开始接触vuex，再vuex首页就看到这么一段话

 

 很显然，我就是为了开发复杂的单页应用所以用到vuex，方便不同组件间传值。更准确的说我就是为了开发复杂的地图应用页面，而选择了vue。

Vuex提供五种核心的状态：

• state：存储状态（变量），和Redux类似，Vuex中的公共属性放在state中

• getters：对数据获取之前的再次编译，可以理解为state的计算属性。我们在组件中使用 $sotre.getters.fun()
• mutations：修改状态，并且是同步的。在组件中使用$store.commit('',params)。这个和我们组件中的自定义事件类似。
• actions：异步操作。在组件中使用是$store.dispath('')
• modules：store的子模块，为了开发大型项目，方便状态管理而使用的。

Store文件

Vue.use(Vuex);

const mapOnline = {
  state: {
    map: {},
    title: "嘉兴·天地图"
  },
  mutations: {
    setMap(state, map) {
      state.map = map;
    },
    setTitle(state,value) {
      state.title = value;
    }
  },
  actions: {},
  getters: {}
};

export default new Vuex.Store({
  modules: {
    mapOnline
  }
});

 调用

    this.$store.commit('setTitle','111');
   
    console.log(this.$store.state.mapOnline.title)