Vuex（State, Mutations, Actions, Getters）

vuex

核心概念

1. State
2. Mutations
3. Actions
4. Getters

一、State

State提供唯一的公共数据源，所有共享的数据都存放到store的State中进行存储
src/store/index.js中代码如下：

export default new Vuex.Store({    
    state: {    
        list: []
    }，
    mutations: {    
        initList (state, list) {      
          state.list = list    
        },
        removeItem (state, id) {      
            const i = state.list.findIndex(x => x.id === id)      
            if (i !== -1) {        
                state.list.splice(i, 1)      
            }    
        }
    }，
    actions: {    
        getList (context) {      
            axios.get('/list.json').then(({ data }) => {                    
            context.commit('initList', data)      
            })    
        }  
    }，
    getters: {    
        unDoneLength (state) {      
            return state.list.filter(x => x.done === false).length    
        }
    }

1. 组件访问State中数据的第一种方式：

this.$store.state.全局数据名称

1. 组件访问State中数据的第二种方式：

//步骤一
import { mapState } from 'vuex'
//步骤二
computed: {
    ...mapState (['list'])
}
//然后就可以当作data中的数据一样使用 
	

二、Mutations

Mutations用于变更Store中的数据

1. 组件变更State中数据的第一种方式：

    //在methods中
    removeItemById (id) {
      this.$store.commit('removeItem', id)
    }

2. 组件变更State中数据的第二种方式：

import { mapMutaytions } from 'vuex'
  methods: {
    ...mapMutaytions(['removeItemById'])
  }
//然后就可以当作methods中的方法一样使用

三、Actions

Actions用于处理异步任务
原理是：
在Actions中通过【context.commit(‘initList’, data) 】触发Mutations, 从而变更数据；
只有Mutations中定义的函数才有权力修改State中的数据。
也就是先触发Actions处理异步任务，接着Actions再触发Mutations变更数据。

1. 触发Actions的方式一

    //在methods中
    handle (id) {
      this.$store.dispatch('getList', id)
    },

2. 触发Actions的方式二

import { mapActions } from 'vuex'
  methods: {
    ...mapActions(['getList'])
  }

四、Getters

getters用于包装数据。
1.使用Getters的方式一

this.$store.getters.名称

2.使用Getters的方式二

import { mapGetters } from 'vuex'
  computed: {
    ...mapGetters(['unDoneLength'])
  }