zoukankan      html  css  js  c++  java
  • vue2 vuex 简单入门基础

    1、vuex中文文档 https://vuex.vuejs.org/zh-cn/api.html

    2、我理解vuex 应用观察者模式 设置了全局的状态 state 状态变化即通知更新全局state

    3、应用方法 全局安装vuex cnpm install vuex -g

    4、在main.js中配置

    import Vuex from 'vuex';
    Vue.use(Vuex);
    const vuex_store = new Vuex.Store({
        state:{
            user_name : "",
            evaluate : ""
        },
        mutations:{
            showUserName(state,iarg){
                alert(state.user_name = iarg);
            },
            editEvaluate(state,itext){
                state.evaluate = itext;
                //alert(state.evaluate = itext);
            }
        }
    });
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      store:vuex_store,
      template: '<App/>',
      components: { App }
    })

    在页面中society.vue中

    <div class="form-group">
                                    <label class="col-sm-2 control-label">用户名</label>
                                    <div class="col-sm-10">
                                        <input type="text" v-model="username" v-on:change="userNameChange" class="form-control" :placeholder="username">
                                    </div>
                                </div>
    export default {
            data() {
                return{
                    edit:false,
                    username:"",
                    }
                },   
                
                     methods: {
                            userNameChange(){
                          this.$store.state.user_name = this.username;
                          console.log(this.$store.state.user_name);
                   }
             }
    }

     addjob.vue

    <div class="form-group">
                <div class="col-sm-10 col-sm-offset-2">
                    <button type="button" v-on:click="submit" class="btn btn-default">提交</button>
                </div>
            </div>
    <script>
        export default{
            data() {
                return{
                    username:{user_name:'啊啊啊啊'},
                    experiences:[{id:100}]
                }
            },
            methods:{
                submit(){
                    //alert(this.$parent.$data.username +"==="+ this.$parent.$data.userarea);
                    this.$store.commit("showUserName",this.username.user_name);
    
                }
            }
        }
    </script>
  • 相关阅读:
    设备驱动开发之缓冲区读写操作
    什么是80Plus
    INF Manufacturer Section
    C++编程获得某台机器的IP地址
    INF DestinationDirs Section
    importlib模块
    django的内置信号
    auth模块(登录验证)
    头像文件的预览
    powerDesiger 常用设置
  • 原文地址:https://www.cnblogs.com/junwu/p/7155597.html
Copyright © 2011-2022 走看看