vuex的store管理和使用
vuex的store管理和使用
YXMBetter 发表于8个月前
vuex的store管理和使用
  • 发表于 8个月前
  • 阅读 32
  • 收藏 1
  • 点赞 0
  • 评论 0

【腾讯云】新注册用户域名抢购1元起>>>   

简述一下使用步骤,希望可以帮助到你。

  • 创建并注入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,{你新增的对象数据})
}
  • 加油
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 6
博文 157
码字总数 104167
×
YXMBetter
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: