详解vue之vuex

vuex存在的目的

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

1.安装vuex

npm i vuex --s

2.基本代码

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

// main.jsimport 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.jsimport * 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.jsexport const SET_USER_ID = 'SET_USER_ID'export const SET_HUIYUAN = 'SET_HUIYUAN'

// getters.jsexport const userId = state => state.userIdexport const huiyuan = state => state.huiyuan

// actions.jsimport * as types from './mutation-types'export const setInformation = function ({commit, state}, {information}) {    commit(types.SET_USER_ID, information)    commit(types.SET_HUIYUAN, true)}

// index.jsimport 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.jsconst state = {  userId: '',  huiyuan: false}export default state

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

3.vuex实例

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

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

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

// me.vueimport {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的理解，有问题可以留言，希望这篇文章对你有用!

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