简单记录一下vuex的书写方法

目录结构(如图)


store

1. index.js

        import Vue from 'vue'

        import Vuex from 'vuex'

        import state from './state'

        import * as getters from './getters'

        import mutations from './mutations'

        import * as actions from './actions'

        import user from './module/user'

        Vue.use(Vuex)

        export default new Vuex.Store(

            state,

            getters,

            mutations,

            actions,

            modules: {

                user

            }

       })

2.state.js

        const state = {

            name: 'Bates',

            age: 29

        }

        export default state

3.getters.js

        export const name = state => {

            return state.name

        }

        export const age = state => state.age

4.mutations_types.js

        export const SET_NAME = 'SET_NAME'

        export const SET_AGE = 'SET_AGE'

5.mutations.js

        import * as types from './mutations_types'

        const mutations = {

            [types.SET_NAME](state, name) {

                state.name = name

            },

            [types.SET_AGE](state, age) {

                state.age = age

            }

        }

        export default mutations

6.actions.js

import * as types from './mutations_types'

export const editNameAge = ({ commit, state }, { name, age }) => {

    return new Promise((resolve, reject) => {

        setTimeout(() => {

            commit(types.SET_NAME, name)

            commit(types.SET_AGE, age)

            resolve()

        }, 2000)

    })

}

调用getters方法

先import引入mapGetters方法

格式:import { mapGetters } from 'vuex'

在vue的computed下调用 ...mapGetters([ ]) 中括号中写入要获取的getters方法


调用mapGetters

调用mutations方法

先import引入mapMutations方法

在vue的methods下调用 ...mapMutations({ }) 大括号中写入要修改的数据的mutations方法

调用mapMutations

调用actions方法

先import引入mapActions方法

在vue的methods下调用 ...mapActions([ ]) 中括号中写入要修改的数据的actions方法

调用mapActions

刷新浏览器vuex数据重置解决方法

只需写在app.vue中 读取、存储sessionStorage的状态信息 

通过 window.addEventListener 事件绑定可以监听页面刷新 ‘beforeupload’

created() {

        //在页面加载时读取sessionStorage里的状态信息

        if (sessionStorage.getItem('store')) {

            this.$store.replaceState(

                Object.assign(

                    {},

                    this.$store.state,

                    JSON.parse(sessionStorage.getItem('store'))

                )

            )

        }

        //在页面刷新时将vuex里的信息保存到sessionStorage里

        window.addEventListener('beforeunload', () => {

            sessionStorage.setItem('store', JSON.stringify(this.$store.state))

        })

    }

你可能感兴趣的:(简单记录一下vuex的书写方法)