• Node 安装 Vuex

    阅读目录

    注意要点

    vue2 为 3 版本、vuex3 为 vuex4 版本。

    Node 安装 Vuex4

    npm install vuex@next --save

    • 1
    S E:\pdf1\vue-aadmin> npm install vuex@next --save
npm WARN ajv-keywords@3.5.2 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN css-loader@2.0.2 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN less-loader@5.0.0 requires a peer of less@^2.3.1 || ^3.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN update-browserslist-db@1.0.10 requires a peer of browserslist@>= 4.21.0 but none is installed. You must install peer dependencies yourself.
npm WARN vuex@4.0.2 requires a peer of vue@^3.0.2 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ vuex@4.0.2
added 2 packages from 2 contributors in 10.942s
PS E:\pdf1\vue-aadmin>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    在这里插入图片描述

    Node 安装 Vuex3

    npm install --save vuex@3

    • 1
    PS E:\pdf1\vue-aadmin> npm install --save vuex@3
npm WARN ajv-keywords@3.5.2 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN css-loader@2.0.2 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN less-loader@5.0.0 requires a peer of less@^2.3.1 || ^3.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN update-browserslist-db@1.0.10 requires a peer of browserslist@>= 4.21.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ vuex@3.6.2
removed 1 package and updated 1 package in 7.58s

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    在这里插入图片描述

    1 配置 store/index.js

    新建文件夹及文件：store/index.js
    E:\pdf1\vue-aadmin\src\store\index.js

    2 创建 Vuex.Store 实例

    E:\pdf1\vue-aadmin\src\store\index.js

    import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  }
})
export default store

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    3 向 Vue 实例注入 store

    E:\pdf1\vue-aadmin\src\main.js

    // 省略其他
// 1. 导入store
import store from './store' 

new Vue({
  // 省略其他...
  store // 2. 注入Vue实例
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    4 在组件中使用 store

    在任意组件中，通过 this.$store.state 来获取公共数据。

    methods:{
  add() {
    console.log('add Event from info!')
    console.log(this.$store.state)
    console.log(this.$store.state.count)
    store.commit('inscrease')
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    案例

    效果

    在这里插入图片描述
    在这里插入图片描述

    E:\pdf1\vue-aadmin\src\store\index.js

    import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  // state: 用来保存所有的公共数据
  state: {
    nav:[
        {
          id:101,
          name:"平台管理"
        },
        {
          id:104,
          name:"接入系统管理"
        }
    ]
  },
  // 用它修改 state 的方法
  mutations:{
    navs(state, newUrl){
        state.nav = newUrl
    }
  }
})

export default store

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

    E:\pdf1\vue-aadmin\src\main.js

    // The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
// 1. 导入store
import store from './store/index.js' 

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI, { size: 'small', zIndex: 3000 });

Vue.config.productionTip = false

// 导入字体图标
import './assets/fonts/iconfont.css'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: ''
})


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

    E:\pdf1\vue-aadmin\src\components\NavMenu.vue

    <template>
  <el-container class="nav-container">
    <!-- 头部区域 -->
    <el-header>
      <div>
        <img width="50px" src="../assets/logo.png" alt="" />
        <span @click="fun_systemMenges">平台管理</span>
        <span class="toggle-button" @click="toggleCollapse">
          <i class="el-icon-s-fold"></i>
        </span>
      </div>
      <el-button type="info">退出</el-button>
    </el-header>
    <!-- 页面主体区域 -->
    <el-container>
      <!-- 侧边栏 -->
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <!-- 侧边栏菜单区域 -->
        <el-menu
          background-color="#333744"
          text-color="#fff"
          active-text-color="#409eff"
          :unique-opened="false"
          :collapse="isCollapse"
          :collapse-transition="false"
          :router="true"
          :default-active="activePath"
        >
          <!-- 一级菜单 -->
          <el-submenu
            :index="item.id + ''"
            v-for="item in menulist"
            :key="item.id"
          >
            <template slot="title">
              <i :class="iconsObj[item.id]"></i>
              <span>{{ item.authName }}</span>
            </template>
            <!-- 二级菜单 -->
            <el-menu-item
              :index="subitem.path"
              v-for="subitem in item.children"
              :key="subitem.id"
              @click="savaNavState(subitem.path,item,subitem)"
            >
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>{{ subitem.authName }}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!-- 右侧内容主体 -->
      <el-main>
        <!-- 路由占位符 -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      // 左侧菜单
      menulist: [
        {
          id: 101,
          authName: "平台管理",
          path: null,
          children: [
            {
              id: 104,
              authName: "接入系统管理",
              path: "/system",
              children: [],
            },
          ],
        },
        {
          id: 202,
          authName: "系统权限管理",
          path: "/HelloWorld",
          children: [
            {
              id: 205,
              authName: "权限管理",
              path: "/HelloWorld",
              children: [],
            },
          ],
        },
        {
          id: 302,
          authName: "审计日志",
          path: "/Welcome",
          children: [
            {
              id: 305,
              authName: "审计日志",
              path: "/Welcome",
              children: [],
            },
          ],
        },
      ],
      iconsObj: {
        // 一级菜单的icon图标
        101: "el-icon-magic-stick",
        202: "iconfont icon-users",
        302: "iconfont icon-tijikongjian",
        // 101: "iconfont icon-shangpin",
        // 102: "iconfont icon-danju",
        // 145: "iconfont icon-baobiao",
      },
      // 侧边栏是否折叠
      isCollapse:false,
      // 被激活的链接地址
      activePath:""
    };
  },
  created(){
    this.activePath = window.sessionStorage.getItem("activePath");
     // 公共数据传递导航数据
     let getnav = JSON.parse(sessionStorage.getItem('nav'));
     this.$store.commit('navs',getnav)
  },
  methods: {
    // 折叠侧边栏
    toggleCollapse(){
        this.isCollapse = !this.isCollapse;
    },
    // 调整到首页
    fun_systemMenges(){
      this.$router.push({name:'NavMenu'}) 
      window.sessionStorage.removeItem("activePath");
      window.sessionStorage.removeItem("nav");
      this.activePath = "/NavMenu";
    },
    // 侧边栏点击高亮
    savaNavState(activePath,item,subitem){
      window.sessionStorage.setItem("activePath",activePath);
      this.activePath = activePath;

      const nav=[
          {
            id:item.id,
            name:item.authName
          },
          {
            id:subitem.id,
            name:subitem.authName
          }
      ]
      // 公共数据传递导航数据
      this.$store.commit('navs',nav)
      // console.log(JSON.stringify(nav))
      window.sessionStorage.setItem("nav",JSON.stringify(nav));
    }
  },
};
</script>

<style lang="less" scoped>
.nav-container {
  min-height: 100vh;
}
.el-header {
  background-color: #373d41;
  display: flex;
  /* 均匀排列每个元素 */
  justify-content: space-between;
  /* 适用于所有的flex容器，单行时候垂直居中使用align-items: center。 */
  align-items: center;
  color: #fff;
  /* 设置文章，嵌套写法 */
  > div {
    display: flex;
    align-items: center;
    span {
      margin-left: 30px;
      cursor: pointer;
    }
    .toggle-button {
      margin-left: 35px;
      cursor: pointer;
    }
  }
}

.el-aside {
  background-color: #333744;
  .el-menu {
    border-right: none;
  }
}
.el-main {
  background-color: #eaedf1;
}
.iconfont {
  margin-right: 10px;
}
</style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200
    • 201
    • 202
    • 203
    • 204
    • 205

    E:\pdf1\vue-aadmin\src\components\system\system.vue

    // The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
// 1. 导入store
import store from './store/index.js' 

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI, { size: 'small', zIndex: 3000 });

Vue.config.productionTip = false

// 导入字体图标
import './assets/fonts/iconfont.css'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: ''
})


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
  • 相关阅读:
    基于OpenCV+QT的人脸识别打卡项目
    iOS-底层知识解析-＞KVO
    2022年9月1日：在 Visual Studio Code 中使用 Git 版本控制工具（未完成）
    RxJS：前端开发的未来
    Python学习基础笔记一
    自认为最好的rule_of_five
    CVPR 2022 | SharpContour：一种基于轮廓变形 实现高效准确实例分割的边缘细化方法
    四旋翼电调驱动程序（STM32F1）
    PUK码怎么解锁
    算法与数据结构 --- 线性表 --- 链式表示与实现（下）
  • 原文地址：https://blog.csdn.net/weiguang102/article/details/127786019