电商项目实战总结

兄弟组件间通信-vuex

（1）安装

• vue3直接 npm i vuex
• vue2 npm i vuex@3

（2）新建 src/store/index.js

// 引入vue
	import Vue from 'vue'
	// 引入vuex
	import Vuex from 'vuex'
    import tab from './tab'
	import user from './user'
	// 使用vuex
	Vue.use(Vuex)
	
	// 创建并暴露store
	export default new Vuex.Store({
   
        modules:{
   
            tab,
			user
        }
	})

使用模块的方式，把想要存储的数据存在不同的js文件中。例如，上面的tab,user，在其中配置好数据。从index.js 中引入

栗子–user.js:

import Cookie from 'js-cookie'
export default{
   
    state:{
   
        token:''
    },
    mutations:{
   
        setToken(state,val){
   
            state.token = val
            Cookie.set('token',val)
        },
        // 清除
        clearToken(state){
   
            state.token = ''
            Cookie.remove('token')
        },
        // 获取
        getToken(state){
   
            state.token =  Cookie.get('tooken') || state.token
        }
    }
}

（3）main.js 中引入 store

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

1、async与await

（1）登录验证功能

login(){
   
    this.$refs.loginFormRef.validate(async valid => {
   
         if(!valid) return
       // 如果不加await，result是一个promise对象。加上之后result是promise 成功的值，包括需要获取的data
      // const result =await this.$http.post('login', this.loginForm)   -------1-----
	 // 由于想要的数据data中的信息，所以可以对data属性进行解构赋值,将它重命名为res
         const {
   data : res} =await this.$http.post('login', this.loginForm)
         console.log(res);       //-----------2----------
   })
},

不加await:

-------1-----：

-----------2----------:

（2）总结

async 和 await 两种语法结合可以让异步代码看起来像同步代码一样；
1. async 函数的返回值为 promise 对象；2. promise 对象的结果由 async 函数执行的返回值决定；
1. await 必须写在 async 函数中；2. await 右侧的表达式一般为 promise 对象；3. await 返回的是 promise 成功的值

（3）功能实现

// 登录表单验证，字段是否符合要求
 login(){
   
     // async 和 await 两种语法结合可以让异步代码看起来像同步代码一样；
      this.$refs.loginFormRef.validate(async valid => {
   
      if(!valid) return
        // 如果不加await，result是一个promise对象。加上之后result是promise 成功的值，包括需要获取的data
       // const result =await this.$http.post('login', this.loginForm)
       // 由于想要的数据data中的信息，所以可以对data属性进行解构赋值,将它重命名为res
       const {
   data : res} =await this.$http.post('login', this.loginForm)
      // console.log(res);
       if(res.meta.status !== 200) return this.$message.error('登录失败')
       this.$message.success('登陆成功')
      // 1.将登陆成功后的token，保存到客户端的sessionStorage中：（1）其他接口必须在登录后才能访问（2）token只在当前网站打开期间生效，所以将其存在sessionStorage中
      // console.log(res);
       window.sessionStorage.setItem('token',res.data.token)
      // 2.通过编程式导航跳转到后台主页，路由地址是/home
       this.$router.push('/home')
      })
},

2、功能需求：

需要授权的 API ，必须在请求头中使用 Authorization 字段提供 token 令牌
解决：
设置拦截器，当使用axios发送请求时，进行拦截，并将请求头改为恰当的格式
在main.js中

	axios.interceptors.request.use(config => {
   
	  config.headers.Authorization = window.sessionStorage.getItem('token')
	  // 必须return config
	  return config
	})

3、为角色分配权限

数组的join方法：
join方法用于把数组中的所有元素放入一个字符串，元素是通过指定的分隔符进行分隔的。

arr.join(s)

arr ：要合并的数组；s 分隔符（可选，默认为逗号 “，”）

// 点击为角色分配权限
async allotRights(){
   
       const keys = [
             // 展开运算符，把数组展开并合并
             ...this.$refs.treeRef.getCheckedKeys(),
              ...this.$refs.treeRef.getHalfCheckedKeys()
        ]
       // 里面的内容通过逗号拼接
       const idStr = keys.join(',')
       const {
   data : res} = await this.$http.post(`roles/${
     this.roleId}/rights`,{
   rids: idStr})
       if(res.meta.status !== 200) return this.$message.error('分配权限失败！')
       this.$message.success('分配权限成功')
       this.getRolesList()
       this.setRightDialogVisible = false
}

4、树形表格

实例：

使用的插件：
https://github.com/MisterTaki/vue-table-with-tree-grid

 <tree-table
     class="tree_table" 
     :data="cateList" 
     :columns="columns" 
     :selection-type="false"
     :expand-type="false"
     show-index index-text='#' border
     :show-row-hover="false">
         <!-- 作用域插槽，自定义模板列的渲染 .是否有效-->
         <template slot="isok" slot-scope="scope">
           <i class="el-icon-success" v-if="scope.row.cat_deleted === false" style="color:lightgreen"></i>
           <i class="el-icon-error" v-else style="color:red"></i>
        </template>