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>

巴特西

vue2 vuex 简单入门基础

最新文章

热门文章