cli+webpack Vuex的用法(实例讲解)(2)

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { userName : 'ghostwu' }, mutations : { showUserName( state, msg ){ state.userName = msg; } } }) export default store

其中第一个参数 state 就是 $store.state，第二个参数 msg 需要另外传入，这个参数我们通过Header.vue的点击事件中的方法来传递

Header.vue代码：

<template> <div> <input type="text" v-model="msg" /> <input type="button" v-on:click="setName" value="点我" /> </div> </template> <script> export default { name : 'Header', data(){ return { msg : '' } }, methods : { setName(){ this.$store.commit( 'showUserName', this.msg ); } } } </script>

$store.commit 把this.msg的值提交给showUserName。state就收到了改变的状态了，这就是一个vuex最基本的用法和作用

以上这篇Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章: