从无到有构建vue实战项目（七）

十四、Vuex的使用

Vuex是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。简单点理解，就是凡是将数据用状态管理模式来存储，在用到该数据的地方，只要一处地方发生变化，另一处也会发生变化，这样就解决了vue中非父子组件传值的问题，当然了，Vuex的作用不止如此，还有许多新的功能，诸如配合路由守卫做登陆拦截，配合localStorage进行本地数据的存储与管理等等。

Vuex的安装

//npm的安装方式

npm install vuex --save

Vuex的简单实用

利用Vuex和localStorage进行用户状态管理，防止刷新浏览器后用户状态丢失，实现如下：

 //发送请求

          this.axios

            .post(

              "url",

              JSON.stringify(this.userInfo)

            )

            .then(res => {

              console.log(res.data);

              if (res.status == 200 && res.data.verify == true) {

                const userName = res.data.uphone;

                const token = res.data.token;

                this.$router.push({ path: "/" });

                //将token通过commit提交到Vuex

                this.$store.commit("getToken", token);

                // 将登录名使用vuex传递到Home页面

                this.$store.commit("userName", userName);

              } else {

                this.$notify({

                  title: "提示信息",

                  message: "账号或密码错误",

                  type: "error"

                });

              }

            })

            .catch(err => {

              console.log(err);

            });

通过Vuex和localStorage存储用户信息以保持用户状态

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

const mutations = {

   userName: (state, user_name) => {

       state.user_name = user_name

     // 把登录的用户的名保存到localStorage中，防止页面刷新，导致vuex重新启动，用户名就成为初始值的情况

        localStorage.setItem('user_name', user_name)

    },

    getToken(state, token) {

        state.token = token;

        localStorage.setItem('token', token)

    },

}

const state = {

    user_name: localStorage.getItem('user_name'),

    token: localStorage.getItem('token'),

}

// getters 只会依赖 state 中的成员去更新

const getters = {

   userPhone: (state) => state.user_name,

    token: (state) => state.token,

}

const store = new Vuex.Store({

    actions,

    mutations,

    state,

    getters

})

export default store

至此，该功能已实现

十五、侧边导航栏的实现

有时候，我们在项目中有这样的需求，页面左侧是菜单栏，右边是每个菜单项所对应的内容区，点击不同的菜单项，内容区会显示不同的内容，这个怎样实现呢？我采取了子路由渲染的方法，如下：

假设我们有四个菜单项模块，那么它的路由配置是这样的：

{

    path: '/inform',

    name: inform,

    component: (resolve) => require(['../components/presonal/inform.vue'], resolve),

    meta: {

      isLogin: true

    },

    children: [{

        path: '/inform/course',

        name: course,

        component: (resolve) => require(['../components/presonal/slider/course.vue'], resolve)

      },

      {

        path: '/inform/interactive',

        name: interactive,

        component: (resolve) => require(['../components/presonal/slider/interactive.vue'], resolve)

      },

      {

        path: '/inform/system',

        name: system,

        component: (resolve) => require(['../components/presonal/slider/system.vue'], resolve)

      },

      {

        path: '/inform/privateLetter',

        name: privateLetter,

        component: (resolve) => require(['../components/presonal/slider/privateLetter.vue'], resolve)

      }

    ]

  },

然后我们在它的父级路由所对应的页面加上<router-view></router-view>即可实现该功能

至此，该功能已实现

巴特西

从无到有构建vue实战项目（七）

十四、Vuex的使用

十五、侧边导航栏的实现

最新文章

热门文章