vuex基本使用

1.store>index.js文件

import Vue from 'vue'
import Vuex from 'vuex'
import {gteUserinfoisterAPI} from '../api/index'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 保存token
    token: '',
    // 用户信息
    username: ''
  },
  getters: {
  },
  mutations: {
    updateToken(state, token) {
      state.token = token
    }
    // 保存用户信息
    getUsername(state, username) {
      state.token = username
    }
  },
  actions: {
  initUSerInfo(store) {
  //请求数据后将获取到的数据存储到state中
      gteUserinfoisterAPI().then((res) => {
        if (res.code !== 0) {
        //参数一： 使用mutations中定义的方法进行存储，使用方法
        //参数二： 将请求接口获取的数据进行存储
          store.commit('getUsername',res.data.data.username)
        }
      })
    }
  },
  modules: {
  }
})

2.页面中使用

<template>
  <div @click="goLogin"></div>
</template>
<script>
//辅助函数写法
import { mapMutations ， mapState} from 'vuex'
export default {
//actions中请求数据的调用方法
  mounted(){
   this.$store.dispatch('initUSerInfo')
  },
  computed: {
  //从vuex中获取State数据
    ...mapState({count:'count'}),
  },
  //方法
  methods: {
  //定义方法和vuex中命名一致
  ...mapMutations(['updateToken']),
  goLogin(){
  // 清除vuex中，store中的token
   this.$store.commit('token','')
   //从vuex中取数据
   this.$store.state.token
  //使用方法，传递参数
    this.updateToken(1212)
   }
  }
}
</script>