• Vue 使用vuex详解(辅助函数mapGetters, mapActions, mapMutations用法)

    发表于 2020-10-22 20:58浏览698 • 评论0条 • 0人点赞 • 0人收藏

    10月

    22

    技术分享

    1、首先安装vuex

         
    npm install vuex --save
        
    

    2、src/store 文件夹里面创建index.js,actions.js,getter.js,state.js,mutations.js,muations-type.js文件

    3、在state.js建初始值

        
    const state = {
      loginInfo: {} /*  登录信息 */
    }
    export default state
        
    

    4、muations-type.js 声明常量(便于维护)

        
    export const LOGIN_INFO = 'LOGIN_INFO'
        
    

    5、muations.js 添加同步方式改变state 值

        
    import * as types from './muations-type';
    const mutations = {
      [types.LOGIN_INFO] (state, loginInfo) {
        state.loginInfo = loginInfo
      }
    }
    
    export default mutations
        
    

    6、actions.js 添加异步方式改变state 值

        
    import * as types from './muations-type'
    export const saveLoginInfo = function ({ commit }, data) {
      commit(types.LOGIN_INFO, data)
    }
        
    

    7、getter.js 添加获取state值

        
    export const loginInfo = state => state.loginInfo
        
    

    8、index.js里面 new Store

        
    import Vue from 'vue'
    import Vuex from 'vuex'
    import * as actions from './actions'
    import * as getters from './getters'
    import state from './state'
    import mutations from './mutations'
    import createLogger from 'vuex/dist/logger'
    
    Vue.use(Vuex)
    
    const debug = process.env.NODE_ENV !== 'production'
    
    export default new Vuex.Store({
      actions,
      state,
      mutations,
      getters,
      strict: debug,
      plugins: debug ? [createLogger()] : []
    })
        
    

    9、项目目录下main.js 引入store目录下的index.js

        
    import Vue from 'vue'
    import App from './App'
    import router from './router'
    import store from './store/index'
    
    Vue.config.productionTip = false
    
    new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount('#app')
        
    

    10、在项目里面同步和异步改变state 里面的loginInfo

        
    <script type="text/ecmascript-6">
    import { mapMutations, mapActions } from 'vuex'
    export default {
        name: '登录页面',
        data () {
            return {}
    },
        methods: {
          loginSubmit () {
              /*  */
              const self = this
              axios.post(url, {
                  user: 'test',
                  password: 'test'
              }).then((res) => {
                  self.setLgnIo(res.data); //  同步方式
                  self.saveLoginInfo(res.data); // 异步方式
              });
    
          }
        ...mapActions([
            'saveLoginInfo'
        ]),
        ...mapMutations({
            setLgnIo: 'LOGIN_INFO' /*  LOGIN_INFO 声明的常量*/
        })
        },
        created () {
    
        }
    }
    </script>
        
    

    11、在项目里面获取 state里面的loginInfo数据

        
    <script type="text/ecmascript-6">
    import { mapGetters } from 'vuex'
    export default {
        name: '个人中心',
        data () {
            return {
                userName: '', /* 用户名 */
                uId: '' /* 用户id */
            }
        },
        computed: {
            ...mapGetters([
                'loginInfo'
            ])
        },
        created () {
            this.userName = this.loginInfo.username
            this.uId = this.loginInfo.user_id
        }
    }
    </script>
        
    

评论列表(有0条评论)

  • cpsblog
  • Do you like me?

  • 热门文章
  • 推荐文章
  • 最新文章