详解vue之vuex

vuex存在的目的

由于vue为单页面应用，其组件之间的数据传递如果单单依赖storage,很容易出现数据被覆盖，被串改的情况发生，vuex正是为解决这个问题而生，提供一个空间供所有的组件读写。

1.安装vuex

npm i vuex --s

2.基本代码

然后在入口文件main.js输入一下代码

// main.js
import store from './store'

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App },
  store
})

此时我们需要去增加一个文件夹store,在里面新建文件——mutations.js、mutation-types.js、getters.js、actionos.js 、 index.js、state.js 共六个文件。代码如下：

// mutations.js
import * as types from './mutation-types'

const mutations = {
  [types.SET_USER_ID](state, userId) {
    state.userId = userId
  },
  [types.SET_HUIYUAN](state, flag) {
    state.huiyuan = flag
  },
}

export default mutations

// mutation-types.js
export const SET_USER_ID = 'SET_USER_ID'
export const SET_HUIYUAN = 'SET_HUIYUAN'

// getters.js
export const userId = state => state.userId
export const huiyuan = state => state.huiyuan

// actions.js
import * as types from './mutation-types'

export const setInformation = function ({commit, state}, {information}) {
    commit(types.SET_USER_ID, information)
    commit(types.SET_HUIYUAN, true)
}

// index.js
import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as getters from './getters'
import state from './state'
import mutations from './mutations'
import createLogger from 'vuex/dist/logger'

Vue.use(Vuex)

const debug = process.env.NODE_ENV !== 'production'

export default new Vuex.Store({
  actions,
  getters,
  state,
  mutations,
  strict: debug,
  plugins: debug ? [createLogger()] : []
})

//state.js
const state = {
  userId: '',
  huiyuan: false
}

export default state

其中actions.js是对mutation-types的内部元素的组合封装，看需求使用。

3.vuex实例

本文先不引用actions来存储一个userId，在需要存储的组件内部加入下面代码

// home.vue
import {mapMutations} from 'vuex'
methods: {
    // 这个在methods的最后引用
    ...mapMutations({
     setUserId:'SET_USER_ID'
   })
}

然后你便可以在其他地方，如生命周期内或者某个方法里直接输入this.setUserId('nihao') 便可设置userId为‘nihao’
然后在获取数据的组件内部加入如下代码：

// me.vue
import {mapGetters} from 'vuex'
computed: {
  ...mapGetters([
    'userId'
  ])
}

在data()后加入计算钩子computed获取userId，这个userId就如同存在于data中一样，可以this.userId引用，也可以引用到html中去。
下面是我的例子me.vue的完整代码

<template>
    <div class="" v-html="userId">
    </div>
</template>
<script>
    import {mapGetters, mapMutations} from 'vuex'
export default {
    computed: {
    ...mapGetters([
      'userId'
    ])
  },
  data () {
    return {
    }
  },
  created() {
  },
  methods: {
  }
}
</script>
<style>

</style>

效果如下：

---

4.vuex之action实例

接下来讲述如何使用actions.
我们事先在actions中定义了两个元素，一个是userId 为information(即传入的参数)，另一个是huiyuan（会员）为 true。
在需要使用到setInformation 的组件中加入如下代码

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

注意，…mapActions与…mapMutations的用法差不多，但写法不同。mapActions中是一个数组，mapMutations中是一个对象。
然后同mapMutation一样，在在其他地方，如生命周期内或者某个方法里直接输入
this.setInformation({information:'nihao'}) 便可设置userId为‘nihao’。注意：这里的参数是一个对象，因为我们在actions中定义了{information}传入的参数为对象。

这就是我对vuex的理解，有问题可以留言，希望这篇文章对你有用!

更多内容可以前往我的个人博客——小皮咖