【应用场景】

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

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

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

state

[例子]

<template>
    <div class="home">
        {{$store.state.age}}
        {{count}}
        {{countAlias}}
        {{countAge}}
        <button
            @click="changeAge"
        >changeAge</button>
    </div>
</template>
<script>
import {mapState} from 'vuex'
// @ is an alias to /src
export default {
    name: "home",
    computed: mapState({//用mapState的好处是不用每个参数一个函数
        count: state => state.age,//直接取需要的参数即可
        countAlias: "count", //给count取了个别名，应用场景不明
        countAge() {//用这种方式监听state，并且可以调用组件的this
            return this.$store.state.age; 
        }
    }),
    methods: {
        changeAge() {
            this.$store.commit("increaseAge", 2); //官网推荐这种方式，实际上在非严格模式可以直接赋值，但不可追踪
        }
    }
};
</script>

//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
            }
        }
    }
})

<template>
    <!-- Home.vue -->
    <div>
        欢迎进入首页
        <!-- 属性形式 -->
        {{$store.getters.dealName}}  
        <!-- 函数形式 -->
        {{dealAge(123)}}
        <button @click="changeAge">changeAge</button>
    </div>
</template>

<script>
    // import {mapGetters} from 'vuex';
    const {mapGetters} = require('vuex');
    // @ is an alias to /src
    export default {
        methods: {
            changeAge() {
                this.$store.commit('increaseAge', 11)
            }
        },
        computed: {
            ...mapGetters([ //mapGetters形式
                'dealAge'
            ])
        },
    }
</script>

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)
        });
    }
  }
})

<template>
    <div class="home">
        home
        <button @click="f2">f2</button>
    </div>
</template>

<script>
// @ is an alias to /src
export default {
    data() {
        return {
            age: 12
        }
    },
    methods: {
        f2() {
            this.$store.dispatch('getAge', Math.random()).then(() => {
                console.log(this.$store.state.age)
            });
        }
    }
};
</script>
<style scoped>
 .home {
     background-color: pink;
 }
</style>

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

【完】