Vuex状态管理

淮城一只猫 • 编程技术
•
阅读量 0 次 • 评论量 0 个

Cap1 前言

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

可能第一遍不懂是具体什么作用，其实就是类似项目中所谓的“全局变量”。但上面一般简单的基本上很少用到这个，一般来说都是像很多父子组件相关联系所需要，举个例子就是购物车的价格和商品数量，如果不使用Vuex维护那些数据很麻烦，所以有了Vuex基本上很好去解决掉他们。

Vuex文档

官方实例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p>{{ count }}</p>
    <p>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
    </p>
</div>
<script type="text/javascript" src="node_modules/es6-promise/dist/es6-promise.auto.js"></script>
<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript" src="node_modules/vuex/dist/vuex.js"></script>
<script type="text/javascript">
    var store = new Vuex.Store({
        state: {
            count: 0
        },
        mutations: {
            increment: function (state) {
                return state.count++
            },
            decrement: function (state) {
                return state.count--
            }
        }
    });
 
    new Vue({
        el: '#app',
        computed: {
            count: function () {
                return store.state.count
            }
        },
        methods: {
            increment: function () {
                store.commit('increment')
            },
            decrement: function () {
                store.commit('decrement')
            }
        }
    })
</script>
</body>
</html>

Cap2 进阶

<div id="app">
    <p>{{ name }}</p>
</div>
<script type="text/javascript" src="node_modules/es6-promise/dist/es6-promise.auto.js"></script>
<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript" src="node_modules/vuex/dist/vuex.js"></script>
<script type="text/javascript">
    var store = new Vuex.Store({
        state: {
            name: "Jaxson Wang",
            age: "23"
        },
        getters: {
            personInfo: function (state) {
                return "我的名字是" + state.name + "，我今年" + state.age + "岁了";
            }
        },
        mutations: {
            setAge: function (state, age) {
                commit(age, age);
            }
        },
        actions: {
            nameAsyn({commit}) {
                setTimeout(function () {
                    commit("setAge", 18);
                });
            }
        },
        modules: {
 
        }
    });
 
    new Vue({
        el: '#app',
        computed: {
            name: function() {
                return store.state.name
            }
        },
        methods: {
 
        },
        mounted: function () {
            console.log(store.getters.personInfo)
        }
    })
</script>
  • state：存储状态，也就是变量；
  • getters：派生状态。也就是set、get中的get，有两个可选参数：state、getters分别可以获取state中的变量和其他的getters。外部调用方式：store.getters.personInfo()。就和vue的computed差不多；
  • mutations：提交状态修改。也就是set、get中的set，这是vuex中唯一修改state的方式，但不支持异步操作。第一个参数默认是state。外部调用方式：store.commit('setAge', 18)。和vue中的methods类似。
  • actions：和mutations类似。不过actions支持异步操作。第一个参数默认是和store具有相同参数属性的对象。外部调用方式：store.dispatch('nameAsyn')。
  • modules：store的子模块，内容就相当于是store的一个实例。调用方式和前面介绍的相似，只是要加上当前子模块名，如：store.a.getters.xxx()。

Cap3 Vue-Cli使用

├── index.html
├── main.js
├── components
└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── state.js          # 跟级别的 state
    ├── getters.js        # 跟级别的 getter
    ├── mutation-types.js # 根级别的mutations名称（官方推荐mutions方法名使用大写）
    ├── mutations.js      # 根级别的 mutation
    ├── actions.js        # 根级别的 action
    └── modules
        ├── m1.js         # 模块1
        └── m2.js         # 模块2

state.js示例：

const state = {
    name: 'weish',
    age: 22
};
 
export default state;

getters.js示例（我们一般使用getters来获取state的状态，而不是直接使用state）：

export const name = (state) => {
    return state.name;
}
 
export const age = (state) => {
    return state.age
}
 
export const other = (state) => {
    return "我的名字是" + state.name + "，我今年" + state.age + "岁了";
}

mutation-type.js示例（我们会将所有mutations的函数名放在这个文件里）：

export const SET_NAME = 'SET_NAME';
export const SET_AGE = 'SET_AGE';

mutations.js示例：

import * as types from './mutation-type.js';
 
export default {
    [types.SET_NAME](state, name) {
        state.name = name;
    },
    [types.SET_AGE](state, age) {
        state.age = age;
    }
};

actions.js示例（异步操作、多个commit时）：

import * as types from './mutation-type.js';
 
export default {
    nameAsyn({commit}, {age, name}) {
        commit(types.SET_NAME, name);
        commit(types.SET_AGE, age);
    }
};

modules--m1.js示例（如果不是很复杂的应用，一般来讲是不会分模块的）：

export default {
    state: {},
    getters: {},
    mutations: {},
    actions: {}
};

index.js示例（组装vuex）：

import vue from 'vue';
import vuex from 'vuex';
import state from './state.js';
import * as getters from './getters.js';
import mutations from './mutations.js';
import actions from './actions.js';
import m1 from './modules/m1.js';
import m2 from './modules/m2.js';
import createLogger from 'vuex/dist/logger'; // 修改日志
 
vue.use(vuex);
 
const debug = process.env.NODE_ENV !== 'production'; // 开发环境中为true，否则为false
 
export default new vuex.Store({
    state,
    getters,
    mutations,
    actions,
    modules: {
        m1,
        m2
    },
    plugins: debug ? [createLogger()] : [] // 开发环境下显示vuex的状态修改
});

最后将store实例挂载到main.js里面的vue上去就行了

import store from './store/index.js';
 
new Vue({
  el: '#app',
  store,
  render: h => h(App)
});

在vue组件中使用时，我们通常会使用mapGetters、mapActions、mapMutations，然后就可以按照vue调用methods和computed的方式去调用这些变量或函数，示例如下：

import {mapGetters, mapMutations, mapActions} from 'vuex';
 
/* 只写组件中的script部分 */
export default {
    computed: {
        ...mapGetters([
            'name',
            'age'
        ])
    },
    methods: {
        ...mapMutations({
            setName: 'SET_NAME',
            setAge: 'SET_AGE'
        }),
        ...mapActions([
            nameAsyn
        ])
    }
};
喵~