zoukankan      html  css  js  c++  java
  • vue状态管理,配置vuex

    Vue项目中经常会有对状态的控制操作,那么如何合理的封装使用呢?

    main.js 引入store

    //main.js
    import store from './store';
    
    const app =  new Vue({
      router,
      store,
      ...
    })
    

      

    创建store文件夹,新建index、rootState、getters、actions、mutations文件

    ├── src
    │   ├── main.js
    │   └── store
    │         |——index.js
    │         |——rootState.js
    │         |——getters.js
    │         |——actions.js
    │         |——mutations.js
    |——index.html
    

      

     index.js文件

     // 文件都会汇聚到这个地方来,也是创建store对象的地方,就像store的入口一样
     //index.js
     
     import Vue from 'vue';
     import Vuex from 'vuex';
     import * as actions from './actions';
     import * as mutations from './mutations';
     import * as getters from './getters';
     import state from './rootState';
     Vue.use(Vuex)
     const store = new Vuex.Store({
       state,
       getters,
       actions,
       mutations
     })
     export default store;
    

      

    rootState.js文件

    //rootState.js
    
    const state = {
      userName   	: ''
    }
    export default state;
    

      

    getters.js文件

    //getters.js
    
    export const userName      = state => state.userName;
    

      

    mutations.js文件

    //mutations.js
    
    export const setUserName = (state, payload) => {
      state.userName = payload.userName;
    }
    

      

    actions.js文件

    //actions.js
    
    export const setUserName = ({commit},userName) => {
      commit({
        type: 'setUserName', 
        userName
      });
    };
    

      

    使用 vuex,引入示例:

    <template>
      <section class="wrap">
    	引用vuex--userName的值为:{{userName}}
      </section>
    </template>
    
    <script>
    import {mapGetters} from 'vuex'
    export default {
      data () {
        return {
        }
      },
      computed:{
    		...mapGetters(['userName'])
       }
    }
    </script>
    

      

  • 相关阅读:
    LINQPad_批量修改图片名称
    1.2_php验证码
    1.1_php基础语法
    移动管理后台
    [Swift]LeetCode1137. 第 N 个泰波那契数 | N-th Tribonacci Number
    [Swift]LeetCode1136. 平行课程 | Parallel Courses
    [Swift]LeetCode1135. 最低成本联通所有城市 | Connecting Cities With Minimum Cost
    [Swift]LeetCode1134. 阿姆斯特朗数 | Armstrong Number
    [Swift]LeetCode1133. 最大唯一数 | Largest Unique Number
    企业
  • 原文地址:https://www.cnblogs.com/sunbaoxu/p/12620962.html
Copyright © 2011-2022 走看看