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>