vuex个人目录结构与用法

作者: bkbtp 分类: 前端 发布时间: 2018-05-19 11:40

安装vuex

npm install vuex --save

首先看一下目录结构,如图:

blob.jpg

引入vuex

在入口文件main.js中引入:

import store from './vuex/store'

store.js文件:

import Vue from 'vue'
import Vuex from 'vuex'

import account from './modules/account'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    account
  }
})

account.js文件:

import * as types from '../types'

const state = {
  uid: JSON.parse(sessionStorage.getItem('uid')) || '',
  wxid: JSON.parse(sessionStorage.getItem('wxid')) || ''
}

const actions = {
  setUid({ commit }, response) {
    sessionStorage.setItem('uid', JSON.stringify(response))
    commit(types.SET_UID, response)
  },
  setWxid({ commit }, response) {
    sessionStorage.setItem('wxid', JSON.stringify(response))
    commit(types.SET_WXID, response)
  }
}

const getters = {
  uid: state => state.uid,
  wxid: state => state.wxid
}

const mutations = {
  [types.SET_UID](state, response) {
    state.uid = response
  },
  [types.SET_WXID](state, response) {
    state.wxid = response
  }
}

export default {
  state,
  actions,
  getters,
  mutations
}
注意:如果引入了 vuex-persistedstate,就不需要手动操作sessionStorage或者localStorage了。详情请看另一文章Vuex插件之状态持久化

types.js文件:

// 用户id信息
export const SET_UID = 'SET_UID'
export const SET_WXID = 'SET_WXID'

调用vuex中存储的数据

import { Checker, CheckerItem, XProgress } from 'vux'
import { mapActions, mapGetters } from 'vuex'
export default {
  components: {
    Checker,
    CheckerItem,
    XProgress
  },
  data() {
    return {
      gender: '',
      blood: '',
      percent: 25
    }
  },
  computed: {
    ...mapGetters({ Gender: 'gender', Blood: 'blood' })
  },
  created() {
    this.gender = this.Gender
    this.blood = this.Blood
  },
  methods: {
    ...mapActions(['setBlood']),
    selectBlood(value) {
      this.setBlood(value)
      this.$router.push({path: '/assess-blood-two'})
    }
  }
}
  • 如果页面data中的定义的字段和mapGetters中字段相同,可以自定义mapGetters以区分。
  • …mapActions对应vuex中对应模块中的actions。
  • …mapGetters对应vuex中对应模块中的getters。
  • 若有多个模块,在store.js文件中的modules里可自行引入。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

知识共享许可协议
本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。