vuex 简单的使用

首先是项目目录结构：

 

我的vuex的目录是这样的，简单说一下每个js文件的作用吧：

首先是 index.js 文件 ：这个文件主要配置 vuex 的入口及文件的配置：

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

import state from './state';
import actions from './actions';
import mutations from './mutations';
import getters from './getters';

export default new Vuex.Store({
    state, actions, mutations, getters
})

我的 actions.js 里面是不做对 state 里的状态做处理操作的，它只是一个提交的异步过程

import * as types from './types';

export default {
    changeEN: ({commit, state}) => {
        commit(types.LANG_EN)
    },
    changeCH: ({commit, state}) => {
        commit(types.LANG_CH)
    },
    changeIsCustom: ({commit, state},params) => {
        commit(types.IS_CUSTOM, params)
    }
}

在 vuex 修改状态都会在 mutations.js这个阶段里，它接收 actions过来的方法及状态值，然后去修改state里面的状态：

import * as types from './types';

export default {
    [types.LANG_CH]: (state) => {
        state.lang = 'zh-CN';
        // this.$i18n.locale = 'zh-CN';
    },
    [types.LANG_EN]: (state) => {
        state.lang = 'en-US';
        // console.log(this.$i18n)
        // this.$i18n.locale = 'en-US';
    },
    [types.IS_CUSTOM]: (state,params) => {
        state.isCustom = params;
    }
}

然后通过 getters.js里面统一分发出去：

export default {
    getLang(state) {
        return state.lang
    },
    getIsCustom(state) {
        return state.isCustom
    }
}

 state.js 上面也说到了，就是存放状态的地方：

export default {
    lang: 'en-US',
    loginState:false,//登录状态
    isCustom : false,//是否是资金流水页
}

types.js主要是些定义方法名：

export const LANG_CH = 'LANG_CH';//中文
export const LANG_EN = 'LANG_EN';//英文

export const IS_CUSTOM = 'IS_CUSTOM';//资金流水页面

 这样就实现了一个简单的数据处理 vuex 系统流程。

可能会有疑问，下面会一点一点揭开这个 vuex 的神秘面纱。

我们在搭建一个 vue 项目的时候，通常会用到 vue-cli 这个脚手架，那么随着前端在发展，那么目前 vue-cli3.0 已经发布了，最近我也尝试的玩了一下，确实简便了许多......扯远啦。

可能会有很多同学会在项目刚提出来，需求都还不是很明确的时候就开始搭建前端框架了，然后随着需求一个一个被提出来，然后去一点一点增加依赖的安装和插件的安装。在这里，我还是想说一下，尽量在需求明确后再开始搭框架，这样才能使得前端框架能达到适合这个项目。而不是一个公司就一个框架，所以依赖都一样。

下面就开始我的 vuex 的运用之路，话不多说，上代码：

//main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'animate.css'
import './registerServiceWorker'

import Common from './common';
Vue.use(Common);//注册全局函数

import filters from './filters';
Object.keys(filters).forEach(key=>Vue.filter(key,filters[key]));//注册过滤器

import VueI18n from 'vue-i18n';
Vue.use(VueI18n);
const i18n = new VueI18n({
    locale: 'zh-CN',
    messages: {
        'zh-CN': require('./common/lang/zh'),//中文语言包
        'en-US': require('./common/lang/en')//英文语言包
    }
});




Vue.config.productionTip = false;

router.afterEach((to, from, next) => {
    window.scrollTo(0, 0);
});

router.beforeEach((to,from,next)=>{
    if(to.matched.some(m => m.meta.auth)){
        if(store.state.loginState){
            next();
        }else {
            console.log("需要登录");
            // router.push('/');
            next();//打开登录页面
        }
    }else {
        next()
    }
});

new Vue({
    router,
    store,
    i18n,
    render: h => h(App)
}).$mount('#app')

第一步是建立-store的目录及所需要的配置；

第二步当然是注册 vuex 到 vue 实例上去；

运用：

dispatch方法：this.$store.dispatch(eventName,params) ；这是提交方法到actions里面去，间接处理state

commit方法：this.$store.commit(eventName,params)；这是提交方法哦到mutations里面直接处理state

辅助方法 mapGetters,mapActions的使用：

mapActions：是用在 methods里面，是方法的使用

mapGetters：是用在 computed 里面，是返回值

...

<div v-if="item.children && navChildrenStatus && !getIsCustom" class="contentNav-item-children">
                        <router-link  class= 'contentNav-item-children-item' tag="p" v-for="(items,indexs) in item.children" :to="items.path" :key="items.id">
                            {{$t(items.text)}}
                        </router-link>
                    </div>

...


import {mapGetters} from 'vuex';
...
mounted() {
            if (window.location.href.indexOf('custom') !== -1) {
                this.$store.dispatch('changeIsCustom',true)
            } else {
                this.$store.dispatch('changeIsCustom',false)
            }
        }
...
 //计算属性
        computed: {
            ...mapGetters(['getIsCustom'])
        }

 

 更多好用的方法，我们都很期待，希望大家能够分享出来。