前端学习笔记一.Flex布局与VUE2中vuex的使用

 经过大佬的提醒开始记笔记，顺便发个博客吧。

一.Flex布局。

参考博客：flex布局知识点（阮一峰博客） - 走看看

目前关于flex布局还有一些问题，留个插槽，后面编辑。

同时记一下html中  ；&ensp；&emsp表示不同宽度的空格。
表示换行。

二.vuex

vuex在搭建项目时可自动引入，手动引入教程很多不多赘述。

vuex的作用：存数据，可以在同项目中任何地方通过特定方法取出来以及修改。

在中进行定义。

1.state：用来存数据的地方。在比如像这样

 

state: {
    user: {
      id:4111,
      leave:1,
      timeout:0
    } 
  },

然后在目标页面，通过

this.$store.state便可以取用。

 

2.mutations：修改state中数据的入口。首先在中：

 

mutations: {
    increment(state){
      state.user.leave++
    }
  },

 然后在目标页面

methods:{
    add(){
      this.$store.commit("increment");
    }
  }

需要补充一下：

也可以传入两个参数：它的第一个参数是state，第二个参数是载荷

在调用时：用 this.$store.commit('mutation名'， 载荷) 来调用

注意：Mutation 必须是同步函数，Mutation 里面不能放异步代码

3.getters：例如前文state中的leave，使用getters方法可以生产一个依赖leave的缓存，比如leave*2，随着leave的改变而改变，并且不会去影响leave的值。首先在中，

getters: {
    leaves:state=>{
      return Math.round(state.user.leave/2)
    }
  },

然后在组件中：{{this.$store.getters.leaves}}

通过this.$store.getters.getter的名字 来访问

4.actions：专门用来处理 Vuex 中的异步操作。由于对异步还没有完全搞明白，在下次的笔记中一块研究吧。

5.modules:拆分模板，把复杂的场景按模块来拆开。就是说，可以用modules方法，生成局部的以上四个方法的函数。

export default new Vuex.Store({
  // state: 用来保存所有的公共数据
  state: {},
  getters: {},
  mutations: {},
  actions: {},
  modules: {
    模块名1： {
            // namespaced为true，则在使用mutations时，就必须要加上模块名
        namespaced: true, 
          state: {},
            getters: {},
            mutations: {},
            actions: {},
            modules: {}
    }，
    模块名2： {
        // namespaced不写，默认为false，则在使用mutations时，不需要加模块名
          state: {},
            getters: {},
            mutations: {},
            actions: {},
         modules: {}
    }  
  }
})

namespaced为true可以解决不同模块命名冲突的问题。建议为true

访问数据和修改数据的调整
访问模块中的数据，要加上模块名
获取数据项：  {{$store.state.模块名.数据项名}}
获取getters： {{$store.getters['模块名/getters名']}}

访问模块中的mutations/actions:

如果namespaced为true，则需要额外去补充模块名
如果namespaced为false，则不需要额外补充模块名
$store.commit('mutations名')        // namespaced为false
$store.commit('模块名/mutations名')  // namespaced为true