zoukankan      html  css  js  c++  java
  • vuex的使用二

    1.先看项目的目录结构

    2.在main.js里需要引入store这个文件并挂在实例上

    import store from './store/store'
    ............
    
    new Vue({
      el: '#app',
      router,
      store,
      template: '<App/>',
      components: { App }
    })

    3.store.js里引入action.js和mutation.js文件

    // 状态管理器
    import Vue from 'vue'
    import Vuex from 'vuex'
    import actions from './action'
    import mutations from './mutation'
    Vue.use(Vuex)
    
    const store = new Vuex.Store({
      state : {
        author: 'Wise Wrong',
        amsg: '',
      },
      actions,
      mutations,
      getters:{
        author(state){
          console.log(state)
          return state.author
        }
      }
    })
    export default store

    4.action.js

    import * as types from './mutation_type'
    export default{
        newAuthor({commit},bData){
            commit(types.NEWAUTHOR,bData);
        }
    }

    5.mutation.js

    import * as types from './mutation_type'
    export default{
        [types.NEWAUTHOR](state,msg){
          state.author=msg;
        }
    }

    6.mutation_type.js

    export const SEND_A="SEND_A"
    export const NEWAUTHOR="NEWAUTHOR"

    7.head.vue

    temple:
    <form class="navbar-form navbar-left">
            <div class="form-group">
              <input type="text" v-model="inputTxt" class="form-control" placeholder="通过input改变author">
            </div>
            <button type="button" class="btn btn-default" @click="setAuthor">Submit</button>
          </form>
    
    script:
    
    data () {
        return {
          inputTxt:""
        }
      },
      methods:{
        setAuthor: function () {
          this.$store.dispatch("newAuthor", this.inputTxt);
        }
      }

    8.foot.vue

    <p>
          Copyright&nbsp;&copy;&nbsp;author:{{author}} - 2016 All rights reserved
        </p>
    
    import { mapGetters} from 'vuex'  
    
    computed: {
        ...mapGetters(['author'])
      }

     9.效果

  • 相关阅读:
    实习第一周小记------生活不易
    第一次实习面试感受----苦逼程序员生活初体验
    第一次实习面试感受----苦逼程序员生活初体验 分类: 程序人生 2013-07-28 14:13 2395人阅读 评论(0) 收藏
    Java-基于JDK的动态代理
    JS字符串去替换元素再转换成数组
    byte溢出栗子
    Java链式写法
    Scala笔记
    Java反射使用方法
    Java数组3种创建方式
  • 原文地址:https://www.cnblogs.com/ldlx-mars/p/7787069.html
Copyright © 2011-2022 走看看