zoukankan      html  css  js  c++  java
  • 配置vuex并使用

    配置vuex并使用

    1. 安装vuex: npm install --save-dev vuex
    2. 在src目录下创建store文件夹
    3. store文件夹下文件 index.js,state.js,getters.js,mutations.js,actions.js

    index.js文件中需要引入vue 和 vuex,这个文件是主要的vue文件配置

    import Vue from 'vue';
    import Vuex from 'vuex';
    import state from './state.js';
    import getters from './getters.js';
    import mutations from './mutations.js';
    import actions from './acions.js';
    
    Vue.use(Vuex);
    const store = new Vuex.Store({
        state,
        getters,
        actions,
        mutations
    }) 
    
    export default store;
    

    4 在src文件夹下的入口js文件main.js中引入输出的store

    import store from './store/index.js'
    

    并在Vue对象中加入store的配置

    new Vue({
      el: '#app',
      router,
      store,//加入sotre的配置
      render: h => h(App)
    })
    

    5 解释:
    在state.js中设置状态值tagMessage;
    在constants.js中设置状态值的常量;
    在mutations.js中设置函数来为状态值的常量赋值,从而改变状态值,但是此时state的状态值还没有改变;
    acions设置函数,使用commit来提交mutations中状态值的改变,但是此时state的状态值还是没有改变,需要通过$dispatch来分配actions;
    getters.js中返回了状态值,在vue文件中通过引入mapGetters使用this来调用此state的状态值;
    可以在vue文件中通过this.$store.dispatch来分配actions,从而完成state的commit提交,进一步进行状态值state的改变。

  • 相关阅读:
    【转】构建高并发高可用的电商平台架构实践
    【转】深入解析浏览器的幕后工作原理
    【转】解释器,树遍历解释器,基于栈与基于寄存器
    EasyDarwin返回401 Unauthorized解决方法
    【转】SDP file
    音频PCM格式
    H264相关知识
    testNG之异常测试
    testNG之组测试
    testNG之顺序执行
  • 原文地址:https://www.cnblogs.com/this-xiaoming/p/9404116.html
Copyright © 2011-2022 走看看