vuex 数据状态管理？理解？使用？

概念：

      Vuex是一个能够实现数据共享、单向数据流、可预测化数据并发布订阅机制（闭包原理）

      缺点：刷新页面为什么数据会丢失？

              当页面刷新的时候会重置state的数据，因此需要对数据进行加密缓存处理。

基本构成：

   state：

      定义储存缓存数据。

   getters：

       定义暴露数据。

   mutataions：

       定义修改数据，注意不能有异步，因为mutations是一个纯函数，仅作数据扭转使用，修改数据后并执行发布数据更新消息，若有异步，消息则发布不成功。

   actions：

       定义处理异步，并不能修改数据，由commmit方式递给mutations再执行数据扭转，发布订阅 =====使用dispatch来调用。

   modules：

     数据模块化 需要开启命名空间。

代码示例

import _ from 'lodash'
/* 数据初始化 */
function getDefaultState() {
    return {
        token: '',
        /* 登录的时间 */
        loginTime: '',
        /* 登录储存用户信息 */
        userInfo: {},
        menuList: [],
        /* 默认第一个tabBar */
        tabList: [
            { path: "/UserCenter/UserList/", title: "用户信息" }
        ],
        activeTab: {
            // 当前选中菜单
            path: '/UserCenter/UserList/',
            title: '用户信息',
        },
    }
}
export default {
    namespaced: true,
    state() {
        return {
            token: '',
            /* 登录的时间 */
            loginTime: '',
            /* 登录储存用户信息 */
            userInfo: {},
            menuList: [],
            /* 默认第一个tabBar */
            tabList: [
                { path: "/UserCenter/UserList", title: "用户信息" }
            ],
            activeTab: {
                // 当前选中菜单
                path: '/UserCenter/UserList',
                title: '用户信息',
            },
        }
    },
    getters: {
        getToken: state => state.token,
        getLoginTime: state => state.loginTime,
        getUserInfo: state => state.userInfo,
        getMenuList: state => state.menuList,
        getTabList: state => state.tabList,
        getActiveTab: state => state.activeTab
    },
    mutations: {
        setToken(state, data) {
            state.token = data
        },
        setLoginTime(state, data) {
            state.loginTime = data
        },
        setUserInfo(state, data) {
            state.userInfo = data
        },
        setMenuList(state, _newMenuList) {
            state.menuList = _newMenuList
        },
        setTabList(state, data) {
            state.tabList = data
        },
        setActiveTab(state, data) {
            state.activeTab = data
        },
        addTabar(state, item) {
            
            const str = JSON.stringify(state.tabList)
            const str2 = JSON.stringify(item)
            if (str.indexOf(str2) < 0) {
                state.tabList.push(item)
            }
        },
        reset(state) {
            Object.assign(state, getDefaultState())  //初始化调用
        }
    },
    actions: {
        upsetToken(context, data) {
            setTimeout(() => {
                context.commit('setToken', data)
            })
        },
        upsetUserInfo(context, data) {
            setTimeout(() => {
                context.commit('setUserInfo', data)
            })
        }
        
    }
}

      

Module

当项目很大的时候，很多版块在一起容易混淆，希望每个版块的信息归每个版块下面，易于维护

import { createStore } from 'vuex'
import user from './modules/userInfo'
import global from './modules/global'
import createPersistedstate from 'vuex-persistedstate'
const store = createStore({
    ...global,
    modules:{
      user,
    },
    plugins:[
       createPersistedstate({
        key:'longStore',
        paths:['user']
       })
    ]
})
export default store

 global js文件

export default{
    state:{},
    mutations:{},
    actions:{},
    getters:{}
}

示意图分析

 什么情况下我应该使用 Vuex？

Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。引用 Redux 的作者 Dan Abramov 的话说就是：

Flux 架构就像眼镜：您自会知道什么时候需要它。