记录: vue项目中使用vuex

如果在项目很大或者涉及到数据在多个组件中来回传递,这种情况就很适合使用vuex

---

安装vuex

• vue脚手架安装vuex(推荐)
  • 创建时勾选vuex选项即可
• 手动安装vuex

  npm install --save vuex
  //main.js同级创建store文件夹,文件夹里面创建index.js
  //main.js内部配置vuex
    import store from './store'
    new Vue({
        el: '#app',
        store, //挂载
        template: '<App></App>',
        components: { App }
    });
  

使用vuex

• 创建文件夹

z i909

• index.js 默认以这个文件为出口

import Vue from 'vue'
import Vuex from 'vuex'
// 引入其他模块的js文件
import state from './state'
import mutations from './mutations'
import actions from './actions'
import getters from './getters'
Vue.use(Vuex);
// 挂载
export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters,
    //modules模块可细分数据,适合数据繁琐模块多的情况
    modules: {
    }
})

• state.js 和data差不多,默认导出一个对象

export default {
  page: 1 // 这里即是管理的数据
}

• mutations.js 写方法更改数据(同步操作)

import * as types from './mutations-type' // 引入管理方法名的js文件
export default {
  [types.ADD_NUM](state,num) {
    console.log(num,'mutation')
    state.page  = num
  }
}
// 组件里面提交
import * as types from './mutations-type'
// commit和dispatch的区别在于commit是提交mutatious的同步操作，dispatch是分发actions的异步操作
this.$store.commit(types.ADD_NUM,num);
// 普通js文件里面提交
import store from '@/store'
store.commit('方法名', '值')
// 辅助函数提交 (单独介绍)

• actions 写方法更改数据(异步操作)

export default {
  // 示例
  async reqUserInfo({commit}){
     // 从服务器端验证
     let result = await getUserInfo();
     if(200 === result.success_code){
        commit(USER_INFO, {userInfo: result.data});
     }
  }
}
// 组件里面调用
import * as types from './mutations-type'
// commit和dispatch的区别在于commit是提交mutatious的同步操作，dispatch是分发actions的异步操作
this.$store.dispatch(types.USER_INFO,res.data.data);
// 普通js文件里面调用
import store from '@/store'
store.dispatch('方法名', '值')// dispatch是分发actions的异步操作
// 辅助函数调用 (单独介绍)

• getters 类似计算属性

export default {
// 示例
  getUAKey: (state) => (key) => { // 获取当前的环境(小程序,微信,APP)
    return state.userAgent[key]
  },
}
// 组件里调用
this.$store.getters.getUAKey("wx")
// js文件里调用
import store from '@/store'
const miniEnv = store.getters.getUAKey('miniProgram')

• mutations-types.js 定义提交方法的 (精确导出)

export const ADD_GOODS = 'ADD_GOODS'; // 添加商品到购物车
export const INIT_SHOP_CART = 'INIT_SHOP_CART'; //初始化购物车
export const USER_INFO = 'USER_INFO'; // 用户信息

• 辅助函数(可用于简化获取或者提交)

// 1. 获取state的数据
import {mapState,mapMutations} from 'vuex'
// this.page 即可访问
computed: {
   ...mapState(['page'])
},
// 2. 提交mutations
 methods: {
    ...mapMutations(['ADD_NUM']),
    add() {
      let num = this.page + 1
      this.ADD_NUM(num) //this.ADD_NUM即mutations里面的方法
    }
  }
// 3.异步数据分发actions
 methods: {
    ...mapActions(['reqUserInfo']),
  }
 mounted(){
    // 直接调用即可
    this.reqUserInfo();
},

• modules 单独细分模块

// store文件夹index.js里面
import trace from './modules/trace'
const store = new Vuex.Store({
  state,
  getters,
  mutations,
  actions,
  modules: {
    trace // 挂载trace文件
  },
});

• index.js同级创建一个modules文件夹,专门存放其他模块的的js文件,trace.js就放在modules文件夹 可以在一个js里写,也可以再细分, 一个js里面写如图: