vuex使用和场景案例

vuex是vue提供的一个集中式状态管理器，用于对数据的集中式管理。

vuex有四个重要的属性：state、mutations、actions、getters

1.vuex的使用

安装

npm install vuex

建一个文件夹（store），新建一个index文件，文件内创建状态管理器store

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
    state: {},
    mutations: {},
    actions: {},
    getters: {},
    modules: {}
});

在main.js文件注册vuex

import Vue from 'vue';
import App from './App.vue';
import store from './store/index';
Vue.config.productionTip = false;
new Vue({
    render: h => h(App),
    store
}).$mount('#app');

现在就可以使用vuex对状态进行管理了

2.vuex的四大属性

i.state

state是vuex所管理的数据存放的地方。例如我们需要集中管理的用户信息等。

state: {
        user: '',
        age: 0,
        level: '0'
    },

vuex规定不可以直接通过state直接来修改状态的值，而是通过mutations来修改（不推荐在actions内修改）

ii.mutations

mutations适用于改变vuex所管理状态，是一个纯函数，不能写异步代码

 mutations: {
        setUserMassage(state, data) {
            state.user = data.user;
            state.age = data.age;
            state.level = data.level;
        }
    },

自定义方法可以接收两个参数，state是状态管理属性state的实例，data表示的是该方法的参数，多个需要把参数变成一个对象。

纯函数：函数的放回结果只依赖他的参数,例如

function fn(a){
	return a+1
}

上面的函数就是一个纯函数。例如下面的函数就不是一个纯函数

var b=2
function fn(a){
	return a+b
}

因为该函数的返回值依赖外部变量b，所以它不是一个纯函数。

在vue文件中触发mutations

this.$store.commit(methodsName,...params)

iii.actions

actions可以把它比作一个触发器，用于触发mutations中的方法，从而改变传统

actions: {
        getUserInfo({ commit },data) {
            axios
                .get('https://www.fastmock.site/mock/1144b5db9e5a837f7e4b2c775e8b1172/mock/text')
                .then(response => {
                    console.log(response.data); // 得到返回结果数据
                    commit('setUserMassage', response.data.data);
                })
                .catch(error => {
                    console.log(error.message);
                });
        }

自定义方法接收两个参数，一个是对象：{commit}(固定写法)，另一个是该方法的参数，可省略。

其中{commit}对象提供了commit方法用于mutations内的方法：commit方法有两个参数

要触发mutations内的方法的方法名

需要传该mutations内的方法的参数

在vue文件中触发actions

this.$store.dispatch(methodsName,...params);

Ⅳ.getter

getters相当于vue中的computed，

getters: {
        levelUp(state, data) {
            return state.level + 123;
        }
    },

有两个参数，用于和上面mutations的方法参数一样。

this.$store.getters.computerName

3，使用vuex

vuex提供了$store实例获取vuex的四大属性。

在视图上

$store.state:获取state实例

$store.commit:触发mutations的方法

$store.dispatch:触发actions内方法

$store.getters:获取getters实例

在vue实例上

需要添加“this.”获取

例如

this.$store.getters

i.简化获取

为了方便获取，vuex提供了一组映射关系用于简化获取vuex四大属性

mapState

mapActions

mapMutations

mapGetters

mapState和mapGetters需要在computed配置选项使用。

mapMutations和mapActions需要在methods配置选项使用。

<template>
    <div>
        <h1>主页页面</h1>
        <div>{{ user }}+{{ age }}+{{ level }}</div>
    </div>
</template>

<script>
import { mapActions, mapState } from 'vuex';
export default {
    name: 'App',
    data() {
        return {};
    },
    computed: {
        ...mapState(['user', 'age', 'level'])
    },
    methods: {
        ...mapActions(['getUserInfo'])
    },
    mounted() {
        this.getUserInfo();
    }
};
</script>
<style lang="less" scoped></style>

4.vuex模块化

vuex可以 单独拆分成多个模块，每个模块的vuex可以管理不同类型的状态，拿商品信息作为例子

项目结构

在index.js中定义开启命名空间

 namespaced: true,

import state from './state';
import actions from './actions';
import mutations from './mutations';
export default {
    namespaced: true,
    state,
    mutations,
    actions
};

 在外部index,js中使用modules

import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';
import product from './product/index';
Vue.use(Vuex);
export default new Vuex.Store({
    modules: {
        product:product
        //product //可以写成这样
    }
});

 在vue文件中使用的时候需要带上路径

this.$store.dispatch('product/getProductInfo');

或者

...mapActions({
            getProductInfo: 'product/getProductInfo'
        })
或者
...mapActions('product/getProductInfo',['getProductInfo'])

如果不使用命名空间进行代码隔离

mutations和actions用于的用法

即：

import state from './state';
import actions from './actions';
import mutations from './mutations';
export default {
    //namespaced: true,
    state,
    mutations,
    actions
};

获取方式可以不用带路径

this.$store.dispatch('getProductInfo');

或者

...mapActions(['getProductInfo'])

注意：使用命名空间或者不使用命名空间两种获取方式不能混用。

获取state

this.$store.state.product.productName

或者

...mapState({
   productName: state => state.product.productName
  }),

获取getters

this.$store.getters["product/getProductName"]

或者

...mapGetters("product", ["getProductName"])

actions.mutations和getters格式

...mapXxx("模块名",[
            '方法名'
        ]),

只有state不同，第二个参数是一个对象

...mapState('some/module', {
    a: state => state.a,
    b: state => state.b
  })