zoukankan      html  css  js  c++  java
  • 关于vuex中state、mutation、mutation-type、getters,action的设置

    收集的vue组件:

    https://blog.csdn.net/wang1006008051/article/details/77970492

    1.新建一个store文件夹,新建index.js文件,内容如下:

    import Vue from 'vue';
    import Vuex from 'vuex';
    import state from './state';
    import mutations from './mutations';
    import actions from './actions';
    import * as getters from './getters';
    import createLogger from 'vuex/dist/logger'; // vuex调试工具
    Vue.use(Vuex);

    // 开发环境下开启严格模式
    const debug = process.env.NODE_ENV !== 'production';

    export default new Vuex.Store({
    getters,
    state,
    mutations,
    actions,
    strict: debug,
    plugins: debug ? [createLogger()] : []
    });

    2.新建state.js文件,内容如下:

    //import paras from './paras';
    const state = {
      keys:''
    };

    export default state;

    3.新建mutation-type.js,内容如下:

    export const SET_Keys = 'SET_Keys ';
     
    4.新建mutation.js,内容如下:
    import * as types from './mutation-types';

    const mutations = {
    [types.SET_Keys ](state, value) {
        state.keys= value;
      }
    };
    export default mutations;
     
    5.新建getters.js,内容如下:
    export const getKeys = state => state.keys;
     
    6.新建actions.js,内容如下:
    const actions = {
        myFunc({state, commit}, chartsPieObj) {
      }
    }
    export default actions;
     
    7.在入口文件main.js中使用:
    import store from './store';
    window.vm = new Vue({
        el:'#app',
        store,
        router,
        i18n,
        render: c => c(App)
    })
     
     
  • 相关阅读:
    elasticSearch数据库、skywalking集群部署
    spring boot admin 源码包的编译
    spring cloud config 配置文件更新
    网关拦截:使用用户登录
    Spring Boot Admin 2.1.4最新实战教程
    Spring Boot 整合 Apollo
    spring-boot admin的使用
    第三模块 :微服务网关Zuul架构和实践
    如何实现内核模块与内核版本的解耦
    记录一次内核热补丁制作流程
  • 原文地址:https://www.cnblogs.com/liuhp/p/9714979.html
Copyright © 2011-2022 走看看