vue store状态存储管理

1、引入vuex,使用store存储，一般存储于内存中，刷新页面后会丢失。

　　用法：

import Vuex from 'vuex'

import config from '@/env/config';

Vue.use(Vuex)

export default new Vuex.Store({

    state: {

        deptName: '',

        title: '',

        word: ''

    },

    mutations: {

        //这里是set方法

        setDeptName(state, name) {

            state.deptName = name;

        }

    },

    actions: {

        setDeptName(context, name) {

            context.commit('setDeptName', name);

        }

    }

})

mutations 用于修改state内容的值，actions负责提交mutations

原则上 页面通过 this.$store.dispatch("")来触发对应的action，action里commit触发mutations

2、引入vuex-along,实现存储刷新不丢失，可以指定store内容存储到localstorage或者sessionstorage中。 用法在 new store中添加plugins:[vuexAlong]，（该方式默认将store的state的所有内容存储到localstorage或sessionstorage中）， 如果local和session 不配置，默认vuex-along存储在localstorage中。

　　用法：

plugins: [VueXAlong({
    name: 'along',     //存放在localStroage或者sessionStroage 中的名字
    local:{ list: [], isFilter: false}, //isFilter 配置false,代表list里的对象存储在localstorage中
    session: { list: [], isFilter: true } //isFilter设置为true时， list 数组中的值就会被过滤调,这些值不会存放在seesionstorage中
 })]