vuex的使用及其模块化

写在前面

我在项目中创建了两个页面 home和me，home的作用适用于提交数据然后跳转到me页面，me页面获取vuex中存储的数据来达到我们的效果。

需求

• 创建A/B两个页面，A用于提交数据然后跳转，B用于获取vuex中的数据信息
• 在store文件夹下面创建modules文件夹以此来达到模块化，在store根目录下创建getters.js和index.js
• 在mod####ules文件夹下创建user.js来作为用户模块

目录结构:

store
        modules
            user.js
        getters.js
        index.js
    views
        home
            index.vue
        me
            index.vue

src/views/home/index.vue

<template>
  <div>
    <div class="btn" @click="setUser">修改用户信息</div>
  </div>
</template>

<script>
export default {
  methods: {
    setUser () {
      let users = {name: '张三', age: 30, sex: 'woman'}
      this.$store.dispatch('setUsers',users)
      this.$router.push({name: 'me'})
    }
  }
}
</script>

<style>
.btn {
  color: #fff;
  padding: 20px;
  background-color: red;
}
</style>

src/views/me/index.vue

<template>
  <div>
    <ul>
      <li>姓名: {{userinfo.name}}</li>
      <li>性别: {{userinfo.sex}}</li>
      <li>年龄: {{userinfo.age}}</li>
    </ul>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  computed: {
    ...mapGetters(['userinfo'])
  }
}
</script>

<style>

</style>

src/store/modules/user.js

const state = {
    userinfo: null
}

const mutations = {
    //获取用户信息
    SET_USERS (state,userinfo) {
        state.userinfo = userinfo
    }
}

const actions = {
    // 更新用户信息
    setUsers ({commit}, userinfo) {
        commit('SET_USERS',userinfo)
    }
}

export default {
    state,
    actions,
    mutations
}

src/store/getters.js

const getters = {
    userinfo: state => state.user.userinfo
}
export default getters

src/store/index.js

import Vue from 'vue'
import getters from './getters'
import user from './modules/user'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    user
  },
  getters
})

export default store