Fork me on GitHub

vue vuex

今天来总结下,在项目中使用vuex,项目采用easy-mock模拟数据

如有不正确的地方,请大家联系我,谢谢。

首先在项目中添加vuex

  1. 在store文件夹下面建立index.js,内容如下

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
      import Vue from 'vue'
    import Vuex from 'vuex'
    import { login } from '@/api/http' // 用于登录的
    Vue.use(Vuex)
    const store = new Vuex.Store({
    state: { // 保存全局state --- this.$store.state[key]-- 放在computed
    userInfo: null,
    token: ''
    },
    getters: { // 对state进行不修改操作,相当于数据库的查操作 --- this.$store.getter[key]-- 放在computed

    },
    mutations: { // 同步操作state --- this.$store.commit('func',payload)-- 放在methods
    login (state, payload) {
    state.userInfo = payload
    },
    setToken (state, payload) {
    state.token = payload
    }
    },
    actions: { // 异步操作state --- this.$store.dispatch('func',payload)-- 放在methods
    login ({ commit }, userInfo) {
    return new Promise((resolve, reject) => {
    login(userInfo.username, userInfo.password)
    .then((res) => {
    commit('login', res.userInfo) // 全局state中保存用户信息
    commit('setToken', res.token) // 全局state中保存token
    resolve(res) // 这里很关键,必须要传递res参数,登录之后的其他操作
    })
    .catch((err) => {
    reject(err)
    })
    })
    }
    }
    })

    export default store
  2. 在main.js中添加

    1
    2
    3
    4
    5
    6
    7
    8
    import store from './store'
    new Vue({
    el: '#app',
    router,
    store,
    template: '<App/>',
    components: {App}
    })
  3. 在api文件夹中http.js文件中

    1
    2
    3
    4
    5
    6
    7
    import http from './axios'
    export function login (username, password) {
    return http.post('user/login', {
    username,
    password
    })
    }
  4. 在登录组件中login.vue

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    methods: {
    login (data) {
    this.$store.dispatch('login', data)
    .then((res) => {
    console.dir(res)
    })
    .catch((err) => {
    console.error(err)
    })
    }
    }
-------------本文结束感谢您的阅读,如果本文对你有帮助就记得给个star-------------
Donate comment here