Vue全家桶——Vuex简单理解

为什么需要vuex

当我们在兄弟组件之间进行传值时，必须要把他们联系起来，要么使用子传父，父在传子的方法，要么使用事件中心。
但是这两个方法都有其缺点，例如，事件中心的方法，会有不确定性，而子父子传参又会异常的麻烦，需要找到与他们都有联系的父组件，若是隔了十八辈的兄弟需要引入非常多无用的组件，这就使得开发的难度大大的加大。为此，引入了vuex。
vuex使用
引入：在利用脚手架工具配置项目时，选中vuex进行自动安装。
使用： 在store中index.js中进行写入。

//初始化引入后的页面
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

1.state：作为一个数据源的存在，数据都将存储于此。

//这里的数据其他组件可以通过一定的方法获取到
  state: {
    count: 0
    name: 'zs'
  }

在其他子组件页面中通过一下进行数据的获取

//1.通过this.$store进行获取
this.$store.state.count
//2.执行以下代码后只需this.count即可获取到state中的数据。
import { mapState} from 'vuex'
computed: {
    ...mapState(['count'])
}
this.count

2.mutaions：相当于methods即处理state中的数据。

mutations: {
    add (state) {
      state.count++
    },
    addN  (state, step) {
      state.count += step
    },
    submit (state) {
      state.count--
    },
    submitN (state, step) {
      state.count -= step
    }
  }

在子组件中使用该方法也有两种方式。

handleAdd1 () {
      this.$store.commit('add')
    },
    handleAdd2 () {
      this.$store.commit('addN', 3)
    }
    //2
    import { mapMutations} from 'vuex'
    ...mapMutations(['submit', 'submitN'])
    handleSubmit1 () {
      this.submit()
    },
    handleSubmit2 () {
      this.submitN(3)
    }

3.Actions：由于mutaions只能进行同步操作，当我们执行异步操作时变使用到Actions，其主要作用便是使mutations中的函数发生改变

actions: {
    addAsync (context) {
      setTimeout(() => {
        context.commit('add')
      }, 1000)
    },
    addNAsync (context, step) {
      setTimeout(() => {
        context.commit('addN', step)
      }, 1000)
    },
    submitAsync (context) {
      setTimeout(() => {
        context.commit('submit')
      }, 1000)
    },
    submitNAsync (context, step) {
      setTimeout(() => {
        context.commit('submitN',step)
      }, 1000);
    }
  }

同样在子组件中也有两种使用方法

handleAdd3 () {
      this.$store.dispatch('addAsync')
    },
    handleAdd4 () {
      this.$store.dispatch('addNAsync', 5)
    }
    //2
    import { mapActions } from 'vuex'
    methods: {
    ...mapActions(['submitAsync', 'submitNAsync']),
    handleSubmit1 () {
    handleSubmit3 () {
      this.submitAsync()
    },
    handleSubmit4 () {
      this.submitNAsync(5)
    }
  }

4.getter: 相当于computed，对于Store中的数据进行加工处理形成新的数据它只会包装Store中保存的数据，并不会修改Store中保存的数据，当Store中的数据发生变化时，Getter生成的内容也会随之变化。

getters:{
    showNum : state =>{
      return '最新的count值为：'+state.count;
    }
  }

同样还是有两种方法在子组件中进行获取

this.$store.getters.showNum
//2
import { mapGetters } from 'vuex'
computed:{
  ...mapGetters(['showNum'])
}
this.showNum

5.modules:当项目过于复杂时，1个stare进行整个项目的数据的存储明显有些力不从心。因此可以设置许多子的vuex这样也不用担心命名冲突，基本用法：

import moduleA from './storeA'
modules: {
    a: moduleA
}

在组件中的引入

this.$store.state.a.count

我们可以很清晰的看到并了解到他是以对象的形式添加到根部分stare的js文件中即

state: {
    count: 0,
    name: 'zs',
    a: {
    	count: 1
    }
  }

vuex的出现使我们在各个组件进行传值的时候方便了许多，也是vue全家桶中非常重要的一员！