vuex状态管理原理用法踩坑小计,数据会丢失

最近在项目开发中，再一次遇到了奇葩的临上线改需求，让小编感觉到很恶心，真的是有一个好的产品很重要，否则受苦的永远是程序员，希望小伙伴们不要遇到这种老是临上线该需求并且加班的时候还说耽误时间，简直糟糕透了，巴拉巴拉，哎，不多说了，入正题吧。在这次修改需求时，正好需要用到vuex仓库存储，发现里边还是有还多坑的，vuex储存的原理是存在js 内存中，所以这样的话就会导致，再刷新页面时会使得存储的内容消失，折腾了半天，总结下来，帮助遇到同样坑的小伙伴们。

---

解决方案就是：：：就是将vuex与js的localstroge存储结合起来使用，这样的话小编看来vuex没有什么卵用，希望尤大大可以更新吧。

. 1，首先简单说下vuex的原理吧。

官网说的是vuex是响应式的状态管理模式，与组建直接传值来说是轻松简单了很多，但是由于那个缺陷还是不使用微妙（小编自己认为）。看看vuex的运行机制吧
文件目录如下

 

微信图片_20180908111241.png

第一步：现在store文件夹下新建一个index.js文件，用来导出，输出你自己的存储变量以及状态。
import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app'
import user from './modules/user'
import permission from './modules/permission'
import fundGetters from './modules/fundGetters'
import fundComparsionCodeList from './modules/fundComparsionCodeList'
import getters from './getters'

Vue.use(Vuex)

const store = new Vuex.Store({
    modules: {
        app,
        user,
        permission,
        fundGetters,
        fundComparsionCodeList
    },
    getters
})

export default store
第二部：：：新建一个getter.js文件，里边放的是你要导出的存在state里边的变量
const getters = {
    sidebar: state => state.app.sidebar,
    token: state => state.user.token,
    mobile: state => state.user.mobile,
    institutionGuid: state => state.user.institutionGuid,
    avatar: state => state.user.avatar,
    ip: state => state.user.ip,
    userTodoActions: state => state.user.userTodoActions,
    invObj: state => state.user.invObj,
    roleGuid: state => state.user.roleGuid,
    permissionList: state => state.user.permissionList,
    permissionMap: state => state.user.permissionMap,
    permissionRouters: state => state.permission.routers,
    permission_routers: state => state.permission.routers,
    addRouters: state => state.permission.addRouters,
    permissionMenus: state => state.user.permissionMenus,
    FundTypes: state => state.user.FundTypes,
    userGuid: state => state.user.guid,
    fundCodeList: state => state.fundGetters.fundCodeList,
    fundComparsionList: state => state.fundComparsionCodeList.fundComparsionList
}
export default getters
第三部：：新建一个moudels文件夹，里边存放你要增删改查的变量
那我存储的某一个变量来举例（增删改查）
const fundComparsionCodeList = {
    state: {
        fundComparsionList: []
    },
    mutations: {
     //设置
        SET_COMPARSION: (state, ComparsionLists) => {
            state.fundComparsionList = ComparsionLists
        },
//增
        ADD_COMPARSION: (state, item) => {
            state.fundComparsionList = state.fundComparsionList.concat(item)
        },
//删
        DEL_COMPARSION: (state, item) => {
            for (let i = 0; i < state.fundComparsionList.length; i++) {
                if (state.fundComparsionList[i] === item) {
                    state.fundComparsionList.splice(i, 1)
                    break
                }
            }
        }
    }
}

export default fundComparsionCodeList
在页面中的使用方法：
commit就是来触发存在第三部里边的方法的。
this.$store.commit("ADD_COMPARSION",  this.querycontrastrast); //由于vuex存储受浏览器内存机制的影响，导致再刷新页面时会
如是要得到这个变量那就这么些：
this.$store.getters.fundComparsionList

. 2, 想必大家都遇到过问action和mutation的区别吧？

• 1， mutation是同步的，action是异步的
• 2，mutation可以直接改变state里边的变量，但是action不行，action只能提交mutation,而不是直接变更状态

3，你是如何改变和获取store，state里边的值的？

//改变值
this.$store.commit();    //提交的是mutation
this.$store.dispatch('setUserinfo',decode);    //分发的是action,或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用（需要先在根节点注入 store)
//取值
this.$store.getters.setUserinfo

作者：愿醒静卧忘尘谷
链接：https://www.jianshu.com/p/2178cb2f0ecb
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

作者：愿醒静卧忘尘谷
链接：https://www.jianshu.com/p/2178cb2f0ecb
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。