Vuex总结

【应用场景】

简单来说就是状态管理，存放一些全局参数，供各个组件调用，并且这是响应式的。这里补充下，个人认为Vuex持久化很重要，不然这些参数存在内存中，一个页面刷新就回到解放前，那有什么用。

【本文主要几个内容】(本文所有例子都是基于Vue/cli 3.4的脚手架)

• state
• mutation
• action
• module
• Vuex持久化

state

[例子]

//store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    age: 1
  },
  mutations: {
    increaseAge(state, num) {
        state.age += num; //这里的state指向了前面的state,所以修改了这里就会导致前面的state发生了变化
    }
  },
  actions: {

  }
})

效果：

1.gif

getters

[应用场景]

getters更像一个过滤器，将原始state中的值处理过后再送给调用者。
可以通过以下3种形式访问

• 属性形式
• 函数形式
• mapGetters(和mapState一样)
  看代码：

//store.js
import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        name: 'wcx',
        age: 12
    },
    mutations: {
        increaseAge(state, obj) {
            this.state.age = this.state.age + obj;
        }
    },
    actions: {

    },
    getters: {
        dealName: (state) => {//属性形式的写法
            return 'getters' + state.name;
        },
        dealAge: (state) => (id) => { //函数形式对应的写法
            if(state.age % 2 === 0) {
                return false
            }else {
                return true
            }
        }
    }
})

Mutations

这是官网推荐的修改state的方式，虽然直接在子组件里修改state也可以生效。Mutations里面放一些方法，每个方法接受2个参数，第一个是state,第二个是一个对象，里面可以放多个需要的参数。记住Mutations里面指接受同步方法，异步要用Actions,例子可以看官网。

Actions

和 mutations类似，不同的是Actions是处理异步函数的，然后子组件里，mutations通过commit来提交修改，而actions通过dispatch来提交修改。看代码：

//store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    age: 12
  },
  mutations: {
    increaseAge(state) {
        state.age++;
    }
  },
  actions: {
    getAge(context, param) {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                console.log('param', param)
                context.commit('increaseAge');
                resolve();
            }, 1000)
        });
    }
  }
})

test.gif

Module:

为了防止store过于臃肿，可以通过Module的方式分割模块，看代码：

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

Vuex持久化

【应用场景】

之前在写项目的时候发现vuex是没有做持久化的，那我浏览器一个刷新，所有状态都被重置，这不shit了么？后来通过localstorage的方式解决，但是总感觉应该有现成的方法，不然每次手动控制，岂不是很麻烦。这里介绍下插件vuex-persistedstate
官网地址
接着之前的例子代码：

//store.js
import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedState' //引入插件


Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    age: 12
  },
  plugins:[createPersistedState({//将插件传入vuex
        storage: window.localStorage
  })],
  mutations: {
    increaseAge(state) {
        state.age++;
    }
  },
  actions: {
    getAge(context, param) {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                console.log('param', param)
                context.commit('increaseAge');
                resolve();
            }, 1000)
        });
    }
  }
})

效果：

test.gif

【完】