vuex封装使用

src文件夹下创建store文件夹，内部创建modules文件夹(存储分类vuex)和index.js文件(整合vuex)和getters.js文件(存储vuex计算属性，所有vuex都计算都写在这)

index.js文件内部

//初始化vuex
import Vue from 'vue'
import Vuex from 'vuex'
//引入计算属性文件
import getters from './getters'
//引入分类vuex
import app from './modules/app'
import user from './modules/user'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    app,
    user
  },
  //计算属性文件
  getters
})

export default store

modules文件夹内部创建各个文件(app.js | user.js)演示user.js内部

//引入登录的接口函数
import { login } from '@/api/user'

//箭头函数,封装state
const getDefaultState = () => {
  return {
    //获取token
    token: localStorage.getItem('token') || ''
  }
}

//state，可以直接用{}存储变量不需要函数方法
const state = getDefaultState()

//mutations 
//唯一修改state的地方
const mutations = {
  //存储token
  SET_TOKEN: (state, token) => {
    state.token = token
  }
}

//actions   
const actions = {                                        
  //这里在处理登录业务，userInfo为外部传进来的参数，不需要可不写
  async login({ commit }, userInfo) {
    //解构出用户名与密码
    const { username, password } = userInfo;
    let result = await login({ username: username.trim(), password: password });
    //注意：当前登录请求现在使用mock数据，mock数据code是20000
    if(result.code==20000){
      //vuex存储token
      commit('SET_TOKEN',result.data.token);
      //本地持久化存储token
      localStorage.setItem('token',JSON.stringify(result.data.token))
      return 'ok';
    }else{
      return Promise.reject(new Error('faile'));
    }
  }
}
//暴露出去
export default {
  //开启命名空间防止各文件间名称冲突
  namespaced: true,
  state,
  mutations,
  actions
}

getters.js文件内部

//计算属性
const getters = {
  //简单演示提取vuex仓库state中对象类型变量内部的值(app|user为仓库名称)
  sidebar: state => state.app.sidebar,
  name: state => state.user.name,
}
export default getters

使用

方法一：
//获取getters文件内变量
const name = this.$store.getters.name
方法二（常用）：
//通过mapGetters获取getters文件内变量
import { mapGetters } from 'vuex'
computed: {
    //getters内部定义的变量名
    ...mapGetters([ 'name' ]),
    //调用name示例:const name = this.name
    name() {
      return this.name
    }
}

//访问vuex中actions中定义的方法
方法一（常用）：
//写在methods中点击后访问actions中方法
methods: {
  handleClickOutside() {
    //前面为app仓库中的closeSideBar方法，后面为传递的参数
    this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
  }
}
方法二：
//通过mapActions访问actions中的方法
import { mapActions } from 'vuex'
methods: {
    //调用方法 this.handleLogOut({传入参数})
    ...mapActions([ 'handleLogOut' ])
}

方法一：
//写在computed中获取仓库中state存储的数据
computed: {
    //调用sidebar示例:const sidebar = this.sidebar
    sidebar() {
      //获取app仓库中state内的sidebar变量
      return this.$store.state.app.sidebar
    }
}
方法二（常用）：
//通过mapState获取state存储的数据
import { mapState } from "vuex";
computed: {
    ...mapState({
      //调用sidebar示例:const sidebar = this.sidebar
      //获取app仓库中state内的sidebar变量
      sidebar: (state) => state.app.sidebar
    })
}
方法三：
//通过getters计算属性获取state存储的数据，获取的变量写在getters.js文件内
//获取的sidebar变量可以直接在标签中使用不需要Sidebar方法
import { mapGetters } from 'vuex'
computed: {
    //getters内部定义的变量名
    ...mapGetters([ 'sidebar' ]),
    //调用sidebar示例:const Sidebar = this.Sidebar
    Sidebar() {
      return this.sidebar
    }
}