美文网首页
引入 vuex 管理状态

引入 vuex 管理状态

作者: PaparAzzii | 来源:发表于2018-01-30 09:40 被阅读0次

    在vue和react全家桶的学习中,我一直在思考哪些数据应该给vuex来管理,哪些不用,在学习Redux时看到的话

    "如果你不知道是否需要 Redux,那就是不需要它。" "只有遇到 React 实在解决不了的问题,你才需要 Redux 。"

    无论何时我们都要去努力降低项目的复杂度,软件的维护成本远远大于开发成本,特别是在这个遍地框架搭积木的时代。

    废话不说,我目前的经验,除了全局的数据,其它的都在各自组件内完成吃喝拉撒的生命周期,我们先来学vuex的知识。

    安装

    $ npm install vuex --save
    

    在项目目录新建 store 目录

    新建index.js 我们暂且不会大量的使用vuex,所以创建这一个文件就行了,不用把他的核心概念拆成多个文件

    上代码

    import Vue from 'vue'
    import Vuex from 'vuex'
    import router from '@/router'
    
    Vue.use(Vuex)
    
    const state = {
      get userinfo () {
        let userinfo = JSON.parse(localStorage.getItem('userinfo'))
        if (!userinfo) {
          router.replace({
            path: 'login',
            query: {redirect: router.currentRoute.fullPath}
          })
        }
        return userinfo
      },
      get lang () {
        return localStorage.getItem('lang') || 'cn'
      }
    }
    
    const actions = {
    }
    
    const getters = {
      getUserinfo (state) {
        return state.userinfo
      }
    }
    
    const mutations = {
      setUser (state, data) {
        console.log(data)
        localStorage.setItem('userinfo', JSON.stringify(data.userinfo))
        localStorage.setItem('token', data.token)
      },
      setLang (state, data) {
        localStorage.setItem('lang', data)
      }
    }
    
    export default new Vuex.Store({
      state,
      getters,
      actions,
      mutations
    })
    

    我们用它来管理语言、用户信息和token

    记得前面国际化那章吧,我们需要一个语言切换的组件

    <template>
        <el-select v-model="$store.state.lang" placeholder="请选择" @change="setLanguage">
            <el-option :label="$t('main.lang_cn')" value="cn" />
            <el-option :label="$t('main.lang_en')" value="en" />
        </el-select>  
    </template>
    
    <script>
    export default {
      methods: {
        setLanguage (value) {
          this.$store.commit('setLang', value)
          this.$i18n.locale = value
        }
      }
    }
    </script>
    

    通过 $store.state 去访问 通过 $store.commit 去设置

    相关文章

      网友评论

          本文标题:引入 vuex 管理状态

          本文链接:https://www.haomeiwen.com/subject/vmuqzxtx.html