Vuex

为什么有了sessionStorage和localStorage，vue还需要vuex呢？

1.存储空间：vuex的存储是没有大小限制的，但是sessionStorage和localStorage是有的大概5M

2.vuex是状态管理器，可以实时更新视图，但是sessionStorage和localStorage不可以

3.存储方式，和存储地方不一致; vuex存的是状态，存储在内存；localStorage是浏览器提供的接口，让你存的是接口，以文件的形式存储到本地

4.vuex刷新页面存储的数据会消失，sessionStorage是关闭浏览器存储数据会消失，localStorage一定要手动清空

5.存储数据类型：localStorage和sessionStorage只能存储字符串类型，vuex各种类型皆可

6.vuex用于组件之间的传值，localStorage则主要用于页面之间的传值

总结
localStorage可以代替vuex，对于不变的数据确实可以，但是当两个组件共同用以数据源，如果其中一个组件中的数据源改变，希望另一个组件响应变化，这时候就要选择用vuex。vuex是vue的状态管理机制，是方便组件之间通信的。一个组件的数据变化是会映射到使用这个数据的其他组件。而localStorage是本地存储，是将数据存储到浏览器的方法，一般在跨页面时使用。

注意：localStorage 保存对象的时候，需要先将对象转换成json字符串，然后获取的时候在转换成对象形式

1、Vuex可以持久化存储吗？

不可以（可能会这么问：组件中应用了state中的一个数据，并进行了修改，但是刷新页面，数据又回去了，这是为什么？因为vuex只是一个仓库，不可以持久化存储，要想持久化存储，只能用localStorage或者cookie）

2、Vuex是单向数据流还是双向数据流？

单向数据流，组件只能使用不能修改数据，会报错，只能在mutation中修改

vue数据持久化
方法一：使用 localStorage 存储数据

window.localStorage.setItem(key，value)

方法二：使用 vuex-persistedstate插件

vuex 存在一个痛点，就是刷新以后vuex里面存储的state就会被浏览器释放掉（state都是存储在内存中的）。

办法：

通过vuex-persistedstate插件，实现将数据存储到本地。

1.实现

npm install vuex-persistedstate  --save
import createPersistedState from 'vuex-persistedstate'
export default new Vuex.Store({   
 state:{},    getters:{}, 
   actions:{},    mutations:{},   
 modules:{}, 
   plugins: [createPersistedState()
]  //加上这个就可以了 //里面设置需要缓存的内容})

2. 举个例子：如果你不小心关掉了一个标签，他们可以重新打开并回到之前页面的状态。

自定义存储

如果在本地存储中存储Vuex存储的状态并不理想。人们可以轻松地实现功能使用cookie

import { Store } from 'vuex'import createPersistedState from 'vuex-persistedstate'import * as Cookies from 'js-cookie'const store = new Store({  // ...  plugins: [
    createPersistedState({
      storage: {
        getItem: key => Cookies.get(key),
        setItem: (key, value) => Cookies.set(key, value, { expires: 3, secure: true }),        removeItem: key => Cookies.remove(key)      }    })  ]})
// 用sessionStorage替换localStorage
// createPersistedState({ storage: window.sessionStorage })

方法三： 使用vue-cookie插件

cookie 可以设置过期时间

1.安装

npm install vue-cookie --save

2.在 store中存储起来

import Vue from 'vue';
import Vuex from 'vuex';
 
Vue.use(Vuex)
var VueCookie = require('vue-cookie');
export default new Vuex.Store({ 
 state: {   
 token: VueCookie.get('token') 
 },  mutations: { 
   saveToken(state, token) { 
     state.token = token;    
  // 设置存储      VueCookie.set('token', token, { expires: '30s' });
    }
  },
  actions: {
 
  }
})

3.在登录页面 设置存储起来

import { mapMutations } from 'vuex';
export default {  methods: {   
 login() {      
this.saveToken('123')   
 },  
  ...mapMutations(['saveToken'])  }};