vex的持久化
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 moduleconst 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里存在长生不老，你知道吗？
- vuex优势：相比sessionStorage，存储数据更安全，sessionStorage可以在控制台被看到。
- 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的一些知识