vue vuex的数据状态管理使用------------持久化设置-----------------------------

VUEX 的数据状态管理

简单的使用

npm install vuex --save //安装vuex


在src 目录新建 store 文件夹  建立index.js   文件
main.js中 

```ruby
import store from './store'
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
   sessionopen:10000
  },

  mutations: {
    //追加数据
      increment (state) {
        state.sessionopen++
      }
  },
  
  actions: {},
  getters: {},
  modules: {}
})

页面使用 helloWorld.vue

<template>
  <div class="hello">
      <h2>{{ $store.state.sessionopen }}</h2>
      <button @click='$router.push("/test1")' >测试页1</button>
      <button @click='$router.push("/test2")' >测试页2</button>
      <button  @click="changestate" >修改222</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',

  methods:{
    changestate:function(){
       this.$store.commit('increment')
    }
  }
}
</script>

vuex 存在state中的数据 页面刷新就丢失了
可以使用vuex-persistedstate 来实现数据持久化

import createPersistedState from 'vuex-persistedstate’

//比如在store 文件的index中
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import createPersistedState from 'vuex-persistedstate'
export default new  Vuex.Store({
  state: {
    //所有的数据
    inputvalue:'',
  },
  mutations: {
    setinpiputval(state,info){
     state.inputvalue=info
    }
  },
  actions: {
  },
  getters: {
  },
  modules: {
  },
  plugins: [createPersistedState()]
})