vue2.0-vuex

简介

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。可以想象为一个“前端数据库”（数据仓库）， 让其在各个页面上实现数据的共享包括状态，并且可操作；

Vuex分成五个部分：

   1.State：单一状态树  //可以理解成定义属性
   2.Getters：状态获取    //可以理解成取值，也就是get方法
   3.Mutations：触发同步事件    //同步的赋值
   4.Actions：提交mutation，可以包含异步操作    //异步的赋值（但是其实就是在Mutations的     基础上包装了一层）
   5.Module：将vuex进行分模块

创建vuex

const store = new Vuex.Store({
 state: {
  // 存放状态
 },
 getters: {
  // state的计算属性
 },
 mutations: {
  // 更改state中状态的逻辑，同步操作
 },
 actions: {
  // 提交mutation，异步操作
 },
 // 如果将store分成一个个的模块的话，则需要用到modules。
  //然后在每一个module中写state, getters, mutations, actions等。
 modules: {
  a: moduleA,
  b: moduleB,
  // ...
 }
});
 actions: {
  increment(context){
   context.commit('increment');
  }
  /* 可以用参数结构的方法来写action
   increment({commit}){
   commit('increment');
   }
   */
 }

使用vuex

- state
  //辅助函数的方式
  import { mapState } from 'vuex';
  computed: mapState(['count']);
  this.count
  //直接获取
  this.$store.state.count

- getters
  //辅助函数的方式
  import {mapState, mapGetters} from 'vuex';
  computed: {
  ...mapState(['increment']),
  ...mapGetters(['doneTodos'])
  }
  this.increment,this.doneTodos
  //直接获取
  this.$store.getter.doneTodos
  this.$store.state.increment

- mutations
  //辅助函数的方式
  import { mapMutaions } from 'vuex';
  export default {
   // ...
   methods: {
    ...mapMutaions([
    'increment' // 映射 this.increment() 为 this.$store.commit('increment')
   ]),
   ...mapMutaions([
     add: 'increment'
    ]) // 映射 this.add() 为 this.$store.commit('increment')
    }
  }
  // 因为mutation相当于一个method，所以在组件中，可以这样来使用
  <button @click="increment">+</button>
  //直接使用
  methods: {
   increment(){
    this.$store.commit('increment');
   }
  }

- actions
  //辅助函数的方式
  import { mapActions } from 'vuex'
  export default {
   methods: {
    ...mapActions([
    'increment' 
   ]),// 映射 this.increment() 为 this.$store.dispatch('increment')
   ...mapActions({
   add: 'increment' 
  })// 映射 this.add() 为 this.$store.dispatch('increment')
  }
  }
  // 同样在组件中，可以这样来使用
  <button @click="increment">+</button>
  //直接使用
  this.$store.dispatch('increment');


模块化：
- moudle
  index.js
  import setting form 'setting.js'
  export default new Vuex.Store({
    state: {
      user:{
        name:'mm',
        age:25
      }
    },
  getters:{
  
    },
    mutations: {
    },
    actions: {
    },
    modules: {
  setting
    }
  })

  setting.js
  export default {
        namespaced:true,
        state: {
          user:{
            name:'乔宇',
            age:25
          }
        },
        mutations: {
        },
        actions: {
        },
        getters:{
      
        },
      }
  
正常获取：
 this.$store.state.模块.num  //数据
    
 this.$store.dispatch('模块/方法')  //方法
  
 this.$store.getters['模块/sum']

辅助函数获取模块数据：
...mapState('模块'，{n:"num"})  //第一种对象写法
 
...mapState('模块',["num"])     //第二种数组写法