简述一下使用步骤,希望可以帮助到你。
- 创建并注入store(因为需使用分开管理,使用了vuex的modules管理)
- npm install --save vuex
- 创建
/*该文件为store总管理文件,一般在根目录下,名为store.js*/
import Vue from 'vue'
import VueX from 'vuex'
import user from './store/user' //这个是新创建的文件夹store下的user.js文件,存放store分文件user部分
Vue.use(VueX)
export default new Vuex.Store({
modules: { user },
state: {
/*可以存放一些公用的不变的数据*/
colors: ['red','black']
},
mutations:{}
})
/*该文件为store文件夹下的user.js文件,管理用户登录*/
import Vue from 'vue'
export const USER_SIGNIN = 'USER_SIGNIN'
export const USER_SIGNOUT = 'USER_SIGNOUT'
export default {
state: JSON.parse(sessionStorage.getItem('user')) || {},
mutations: {
[USER_SIGNIN](state,user) {
Object.assign(state,user)
sessionStorage.setItem('user',JSON.stringify(state))
},
[USER_SIGNOUT](state) {
Object.keys(state).forEach(k => Vue.delete(state,k))
sessionStorage.removeItem('user')
}
},
actions: {
[USER_SIGNIN]({commit},user){
commit(USER_SIGNIN,user)
},
[USER_SIGNOUT]({commit}){
commit(USER_SIGNOUT)
}
}
}
- 注入
在全局App.vue文件中, new Vue({新增 store})
- 组件调用方式
/*在需要使用的vue文件中导入并使用*/
import store from './store'
import { USER_SIGNIN,USER_SIGNOUT } from 'store/user'
/*在该页面方法中*/
methods:{
/*如果需要this上添加方法则使用下面的语句添加上*/
...mapActions([USER_SIGNIN])
/*修改时*/
store.commit(USER_SIGNIN,{你新增的对象数据})
}
- 加油