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>