vuex持久化存储（点击一次count加1的操作）

1.npm install vuex --save
2.npm install vuex-persist -D
3.src文件下创建store文件，管理数据及操作，如下

4.main.js中配置

5.操作步骤如下
操作步骤： 当组件中的状态发生改变，通过dispatch函数提交到Action，Actions再通过Commit函数提交到Mutations, 此时，状态发生改变都会实时的去渲染组件。
6.store中六个文件如下

actions.js文件

// Action提交的是mutation，而不是直接变更状态。
// Action可以包含任何的异步操作, 但mutation必须是同步操作。
import * as types from './mutation-types'

export default {
    setCount({ commit }, count) { 
        // 页面中调用这个方法，把要保存的值传进来，若没有则是默认的值
        // commit 一个函数，绑定了store中的数据
        commit(types.SET_COUNT_ADD, {count})
    }
}

getters.js文件


// 派发state的状态值，通过计算属性获取值。可以派生出一些新的状态，如数据++
// 在任何一个组件都可以或获取到你在state存储的数据信息
export default{
    count: state => state.count
} 
 

index.js文件（总入口文件）

import Vue from 'vue'
import Vuex from 'vuex' 
import VuexPersistence from 'vuex-persist'
import actions from './actions'
import state from './state'
import getters from './getters'
import mutations from './mutations'

Vue.use(Vuex)

const vuexLocal=new VuexPersistence({
    storage:window.localStorage, // 默认存储在localStorage中
    reducer:state=>({// 将状态减少到只需要保存的值，默认全部保存
        count:state.count // 这个就是存入localStorage的值
    })
})
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters,
    plugins:[vuexLocal.plugin],
    strict: process.env.NODE_ENV !== 'production',
})

mutation-types.js 文件

// 存放常量，状态匹配才会更改
export const SET_COUNT_ADD ='SET_COUNT_ADD' // count增加
export const SET_COUNT_REDUCE='SET_COUNT_REDUCE'  // count减少

mutations.js文件 


// 更改vuex中状态的唯一方法
import * as types from './mutation-types' // 根据传入的状态值触发方法

export default {

    [types.SET_COUNT_ADD](state, {count}) {
        // console.log('statestate.count', state.count); // 总state存的值，原来的值
        // console.log('payloadpayload', count); //更改后的值
        state.count = count  //更改原先的值，把更改后的值匹配给store中的变量，使其更新
    },
}

state.js 文件

// 更改vuex中状态的唯一方法
import * as types from './mutation-types' // 根据传入的状态值触发方法

export default {

    [types.SET_COUNT_ADD](state, {count}) {
        // console.log('statestate.count', state.count); // 总state存的值，原来的值
        // console.log('payloadpayload', count); //更改后的值
        state.count = count  //更改原先的值，把更改后的值匹配给store中的变量，使其更新
    },
}

7.页面中使用
7.1页面那store数据通过 this.$store.state.count（count是store中自己定义的变量名字）
7.2 更改store中的数据，通过dispatch调actions中定义的方法即可

this.$store.dispatch("setCount", this.$store.state.count+1);

详情如图：