vuex的持久化

更新日期: 2020-03-02阅读: 2k标签: vuex

vuex

Vuex是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应 用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.  

简言之:就是一个状态化管理,能缓存数据,提高性能,它是一个全局的状态,页面能访问到它,有了缓存数据,页面不需要重复的提交数据请求,页面渲染较快,状态一旦改变, 可以在devtools里可以查看状态的改变;可以解决一些复杂的非父子通信..


Vuex有五个核心概念:

1.state:vuex的基本数据,用来存储变量
2.getters:可以从store 中的 state 中派生出一些状态,getters的返回值会根据 它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。
3.mutations:提交更新数据s的方法,必须是同步的(如果需要异步使用action)。每个 mutations 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。t
4.actions:和mutations的功能大致相同,不同之处在于

  • Actions 提交的是 mutations,而不是直接变更状态。
  • Actions 可以包含任意异步操作。

5.modules:模块化vuex,可以让每一个模块拥有自己的state、mutations、actions、getters,使得结构非常清晰,方便管理。


State

我们可以通过Vue的Computed获得Vuex的state,如下 
vuex中index.js

export default new Vuex.Store({
  state: {
    MvList:[],
    carNum:8,
    Msg:"每天很充实"
  },
  })

在某个组件中获取它的状态

   computed:{
         Msg(){
             return this.$store.state.Msg
         },
        carNum(){
             return this.$store.state.carNum
        }
    }


mapState辅助函数

当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会 有些重复和冗余。为了解决这个问题,我们可以使用` mapState` 辅助函数帮助我们生成计算属性,让你少按几次键  

当然得先引入import {mapState} from 'vuex'

computed:{
     ...mapState(['carNum','Msg',]),
    }

getters

getters接收state作为其第一个参数,接受其他 getters 作为第二个参数,如不需要,第二个参数可以省略如下例子  

const store = new Vuex.Store({ 
state: { count:0 },
getters: { 
countDouble: function(state){ //一个参数
   return state.count \* 2 
},
countDoubleAndDouble: function(state, getters) {
 return getters.countDouble \* 2
    }
   } 
})

与state一样,我们也可以通过Vue的Computed获得Vuex的getters。

const app = new Vue({
    store,
    computed: {
        count: function(){
            return this.$store.state.count
        },
        countDouble: function(){
            return this.$store.getters.countDouble
        },
        countDoubleAndDouble: function(){
            return this.$store.getters.countDoubleAndDouble
        }
    },
})    
}


mapGetters 辅助函数

mapGetters 辅助函数仅仅是将 store 中的 getters 映射到局部计算属性,与state类似
首先得引入import { mapGetters } from 'vuex'

export default { 
  computed: { 
// 使用对象展开运算符将 getters 混入 computed 对象中 
...mapGetters([ 'countDouble', 'CountDoubleAndDouble']) 
}
}

mutations

提交mutation是更改Vuex中的store中的状态的唯一方法。mutation必须是同步的,如果要异步需要使用action。  

export default new Vuex.Store({
  state: {
    MvList:[],
    carNum:8,
    Msg:"每天很充实"
  },
  mutations: {
    ChangeCarnum(state){
     state.carNum++
    },
    })
methods:{
    todoChange(){
       this.$store.commit("ChangeCarnum")
    },
 }

mapMutations 辅助函数

与其他辅助函数类似,你可以在组件中使用 this.$store.commit(‘xxx’) 提交 mutation,或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用(需要在根节点注入 store)。  

首先得引入import { mapMutations } from 'vuex'

export default {
  methods: {
     ...mapMutations([ChangeCarnum]),
   // 映射 this.increment() 为this.$store.commit('ChangeCarnum')
 }
}

分发actions

Action 通过 store.dispatch 方法触发store.dispatch('changgeMsgAsync')

   changgeMsgAsync(){     
        this.$store.dispatch("changgeMsgAsync")//派发一个actions           
    },

actions一般做异步操作的

 actions: {
    changgeMsgAsync(){
      axios.get('/vue/mv').then(res=>{
        console.log(res.data.result)
        // this.commit("getMsg",res.data)
        this.commit(getMv,res.data)
      })
    }
  },

mapActions辅助函数

你在组件中使用 this.$store.dispatch('xxx') 分发 action,或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用(需要先在根节点注入 store):  

首先得引入import { mapActions } from 'vuex'

   methods:{
        ...mapActions([
         'changgeMsgAsync'
        ]),
     }

Modules

使用单一状态树,导致应用的所有状态集中到一个很大的对象。但是,当应用变得很大时,store 对象会变得臃肿不堪。所以模块分割 

const module = { 
  state: { ... },
  mutations: { ... },
  actions: { ... }, 
  getters: { ... }
}
export default module
const module = { 
  state: { ... },
  mutations: { ... },
  actions: { ... }, 
  getters: { ... }
  export default module
}

在index.js里引入子store模块文件下的
import city from './moudule/cityMoudle'

  modules: { 
    city
  }

如果在子store里通过开启 命名空间 namespaced:true
则可以这样去访问状态:

computed:{
     ...mapState("city",['carNum','Msg',]),
}

各部门需要管理的共享状态都给我管理吧........


vuex里存在长生不老,你知道吗?

  1. vuex优势:相比sessionStorage,存储数据更安全,sessionStorage可以在控制台被看到。
  2. vuex劣势:在F5刷新页面后,vuex会重新更新state,所以,存储的数据会丢失

因此为了克服这个问题, vuex-persistedstate就出现了

  • 首先下载cnpm i --save vuex-persistedstate

    或者npm install vuex-persistedstate --save

  • 在vuex中引入:

import createPersistedState from 'vuex-persistedstate'

  • 在vuex里 new Vue.stroe设置:
const store = new Vuex.Store({
// 存储数据,避免用的缓存数据,刷新会不存在 
plugins:\[createPersistedState({ 
storage:window.localStorage  //默认是  localstorage    reducer(val){ 
//加上这个函数 就是可以限制存储的内容
return{ //之储存state中的
user user:val.user
} 
//默默认是全部储存
} 
})\], 
})

大概的整理了vuex的一些知识

原文:https://segmentfault.com/a/1190000021886815

链接: https://www.fly63.com/article/detial/8028

为什么使用Vuex

在学习Vuex之前,先了解一下“单向数据流”。Vuex核心就是它的store,其中,有三个重要的部分,State:通过它存取多个组件共享的数据。Mutations:可以改变State中的数据,Actions:提交mutation,可以包含任意异步操作这一步不是必要的。

Vue.js学习,关于Vuex源码解析

Vuex是一个专门为Vue.js框架设计的、用于对Vue.js应用程序进行状态管理的库,它借鉴了Flux、redux的基本思想,将共享的数据抽离到全局,以一个单例存放,同时利用Vue.js的响应式机制来进行高效的状态管理与更新。

vue + vuex + koa2交互实例

主要目的是学会使用koa框架搭建web服务,从而提供一些后端接口,供前端调用。搭建这个环境的目的是: 前端工程师在跟后台工程师商定了接口但还未联调之前,涉及到向后端请求数据的功能能够走前端工程师自己搭建的http路径

vuex 源码:深入 vuex 之 mutation

vuex 规定更改 state 的唯一方法是提交 mutation,主要是为了能用 devtools 追踪状态变化。那么,提交 mutation 除了最主要的更改 state,它还做了其它一些什么事情呢,让我们来一探究竟。

使用Vuex解决Vue中的身份验证

Vuex为Vue.js应用管理状态.。对于应用中所有的组件来说,它被当做中央存储,并用规则确保状态只能以可预见的方式改变。对于经常检查本地存储来说,听起来是个更好的选择?让我们一起来探索下吧。

关于Vuex的action传入多个参数的问题

已知Vuex中通过actions提交mutations要通过context.commit(mutations,object)的方式来完成,然而commit中只能传入两个参数,第一个就是mutations,第二个就是要传入的参数

Vuex 的异步数据更新

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数 mutation 是同步执行,不是异步执行。

vue单页面应用刷新网页后vuex的state数据丢失的解决方案

其实很简单,因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,store里面的数据就会被重新赋值。一种是state里的数据全部是通过请求来触发action或mutation来改变

Vuex状态管理,state、getter

首先在 vue 2.0+ 你的vue-cli项目中安装 vuex :然后 在src文件目录下新建一个名为store的文件夹,为方便引入并在store文件夹里新建一个index.js,里面的内容如下:接下来,在 main.js里面引入store,然后再全局注入一下

Vuex新手的理解与使用

开始尝试学习使用vue,是因为此前总是遇到页面逻辑数据与视图的一致性问题.在使用vue之前,我们使用jQuery插件的时候,一桩麻烦事就是既要在每个数据变更后,写代码去改变视图,又要考虑html上各种输入

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!