Vuejs 2.0 使用 Vuex 开发项目
liudong0763

超级无敌感谢老师,正想学vuex

JellyBool

哈哈哈,希望视频对你学习 vuex 有所帮助。

以后还是叫我 jelly 吧。

liudong0763

好的, Jelly

TXZ

Jelly,为什么我的state里面的数据老是上一次mutation修改的数据?所以每次第一次登陆的时候老是state为空围着undefined

chenxin

没搞明白你那个this.axios和Vue.axios的应用场景,解释一下。。

JellyBool

在 Vue 对象里面的话,就可以使用 this.axios ,没在的时候就要用 Vue.axios。

manpai
<template>

    <!-- Page Sidebar -->
    <div class="page-sidebar" id="sidebar">
        <!-- Page Sidebar Header-->
        <div class="sidebar-header-wrapper">
            <input type="text" class="searchinput"/>
            <i class="searchicon fa fa-search"></i>

            <div class="searchhelper">搜索菜单</div>
        </div>
        <!-- /Page Sidebar Header -->
        <!-- Sidebar Menu -->
        <ul class="nav sidebar-menu">


            <router-link tag="li" v-for="menu in menus" :to="{ path: menu.text }">
                <a :class="{ 'menu-dropdown':menu.children }" :click="setPageHeaderText(menu.ext.display_name)">
                    <i class="menu-icon " :class=" menu.ext.icon "></i>
                    <span class="menu-text"> {{ menu.ext.display_name }} </span>
                    <i class="menu-expand" v-if="menu.children"></i>
                </a>

                <ul class="submenu" v-if="menu.children">
                    <router-link tag="li" v-for="submenu in menu.children" :class="'second'"
                                 :to="{ path: submenu.ext.name }"
                                 active-class="active">
                        <a :click="setPageHeaderText(submenu.ext.display_name)">
                            <span class="menu-text">{{ submenu.ext.display_name }}</span>
                        </a>
                    </router-link>
                </ul>
            </router-link>

        </ul>
        <!-- /Sidebar Menu -->
    </div>
    <!-- /Page Sidebar -->

</template>
<style scoped>

</style>
<script>

    export default{
        name:'page-sidebar',
        data(){
            return{
                menus:[]
            }
        },

        methods: {
            setPageHeaderText(text){
            alert(text);
                //this.$store.dispatch('getPageHeaderText',text)
            }
        },
        mounted(){

            this.axios.get('menu').then(response => {
                const data = response.data.data

                if(data){
                for(var i=0;i<data.length;i++)
                   
                    if(data[i].children != null){
                        data[i].text='#'
                    }
                }
                this.menus = response.data.data
                setTimeout(InitiateSideMenu,1000)
               
            })
        }
    }

</script>

为什么我在v-for 的标签绑定事件 事件会自动执行? 我写的alert()会一直弹出值

George

请问Vue 能否动态的增加路由,我的设想是这样的,用户未登录的情况下,只有两条路由: / 和/login。当用户登录后根据用户的权限获取相应的路由。这个能否实现?

JellyBool

Vue 能否动态的增加路由?

这个我暂时还是没有看到过。

至于你的这个需求,应该还是注册好路由再根据权限检查是否可以渲染相对应的组件吧。

George

应为我的后台用户的权限是三个维度的,如果前端要实现检查是相当麻烦的,所以我想让前端直接根据后端返回的权限对应的路由,做渲染!
我之前是用blade模板写的:

<ul class="site-menu">
                    @foreach($user->menus as $menu)
                        @if(! array_has($menu, 'children'))
                            <li class="site-menu-item">
                                <a href="{{ route($menu->router) }}">
                                    <i class="site-menu-icon {{ $menu->icon }}" aria-hidden="true"></i>
                                    <span class="site-menu-title">{{ $menu->name }}</span>
                                </a>
                            </li>
                        @else
                            <li class="site-menu-item has-sub {{ active_class(if_uri_pattern([$menu->router.'/*']), 'active open') }}">
                                <a href="javascript:void(0)">
                                    <i class="site-menu-icon {{ $menu->icon }}" aria-hidden="true"></i>
                                    <span class="site-menu-title">{{ $menu->name }}</span>
                                    <span class="site-menu-arrow"></span>
                                </a>
                            @if($menu->children)
                                <ul class="site-menu-sub">
                                    @foreach($menu->children as $child)
                                        <li class="site-menu-item {{ active_class(if_route($child->router)) }}">
                                            <a class="animsition-link" href="{{ route($child->router) }}">
                                                <span class="site-menu-title">{{ $child->name }}</span>
                                            </a>
                                        </li>
                                    @endforeach
                                </ul>
                            @endif
                     </li>
              @endif
       @endforeach
</ul>

现在想改成Vue 单页应用

George

后端获取登录用户权限

/**
     * 获取用户菜单属性
     * @return array
     */
    public function getMenusAttribute()
    {
        $user = Auth::user();
        if ($user->admin) {
            $permissions = DB::table('permissions')
                ->select('id', 'dependency', 'name', 'icon', 'type', 'router', 'status')
                ->where('type', 'menu')
                ->get()->groupBy('dependency');
        } else {
            /**
             * 获取人员所在部门的权限
             */
            $departments = DB::table('users')->select('permissions.*')
                ->leftJoin('department_user', 'users.id', '=', 'department_user.user_id')
                ->join('departments', 'department_user.department_id', '=', 'departments.id')
                ->leftJoin('department_permission', 'departments.id', '=', 'department_permission.department_id')
                ->join('permissions', 'department_permission.permission_id', '=', 'permissions.id')
                ->where('users.id', $user->id)
                ->get();
            /**
             * 获取人员所在岗位的权限
             */
            $positions = DB::table('users')->select('permissions.*')
                ->leftJoin('position_user', 'users.id', '=', 'position_user.user_id')
                ->join('positions', 'position_user.position_id', '=', 'positions.id')
                ->leftJoin('position_permission', 'positions.id', '=', 'position_permission.position_id')
                ->join('permissions', 'position_permission.permission_id', '=', 'permissions.id')
                ->where('users.id', $user->id)
                ->get();
            /**
             * 获取人员拥有的特殊权限
             */
            $users = DB::table('users')->select('permissions.*')
                ->leftJoin('user_permission', 'users.id', '=', 'user_id')
                ->join('permissions', 'user_permission.permission_id', '=', 'permissions.id')
                ->where('users.id', $user->id)
                ->get();

            /**
             * 将三种权限按依赖关系分组并根据ID排序
             */
            $permissions = collect(array($departments, $positions, $users))
                ->collapse()
                ->sortBy('id')
                ->groupBy('dependency');
        }

        $menus = [];

        /**
         * 将Collection按照菜单结构添加到$menus数组中
         */
        foreach ($permissions as $key => $value) {
            if ($key == 0) {
                foreach ($value as $item) {
                    $menus[$item->id] = $item;
                }
            } else {
                $menus[$key]->children = $value;
            }
        }

        return $menus;
    }