本文旨在经过一个简单的例子,练习vuex的几个经常使用方法,使初学者以最快的速度跑起来一个vue + vuex的示例。vue
学习vuex须要你知道vue的一些基础知识和用法。相信点开本文的同窗都具有这个基础。webpack
另外对vuex已经比较熟悉的大佬能够忽略本文。git
基于vue-cli脚手架生成一个vue项目 经常使用npm命令:github
npm i vue-vli -g
vue --version
vue init webpack 项目名
复制代码
进入项目目录,使用npm run dev先试着跑一下。web
通常不会出现问题,试跑成功后,就能够写咱们的vuex程序了。vuex
使用vuex首先得安装vuex,命令:vue-cli
npm i vuex --save
复制代码
介绍一下咱们的超简单Demo,一个父组件,一个子组件,父组件有一个数据,子组件有一个数据,想要将这两个数据都放置到vuex的state中,而后父组件能够修改本身的和子组件的数据。子组件能够修改父组件和本身的数据。npm
先放效果图,初始化效果以下:编程
若是想经过父组件触发子组件的数据,就点“改变子组件文本”按钮,点击后效果以下:bash
若是想经过子组件修改父组件的数据,就在子组件点击“修改父组件文本”按钮,点击后效果以下:
首先是Parent.vue组件
<template> <div class="parent"> <h3>这里是父组件</h3> <button type="button" @click="clickHandler">修改本身文本</button> <button type="button" @click="clickHandler2">修改子组件文本</button> <div>Test: {{msg}}</div> <child></child> </div> </template> <script> import store from '../vuex' import Child from './Child.vue' export default { computed: { msg(){ return store.state.testMsg; } }, methods:{ clickHandler(){ store.commit('changeTestMsg', '父组件修改本身后的文本') }, clickHandler2(){ store.commit('changeChildText', '父组件修改子组件后的文本') } }, components:{ 'child': Child }, store, } </script> <style scoped> .parent{ background-color: #00BBFF; height: 400px; } </style> 复制代码
下面是Child.vue子组件
<template> <div class="child"> <h3>这里是子组件</h3> <div>childText: {{msg}}</div> <button type="button" @click="clickHandler">修改父组件文本</button> <button type="button" @click="clickHandler2">修改本身文本</button> </div> </template> <script> import store from '../vuex' export default { name: "Child", computed:{ msg(){ return store.state.childText; } }, methods: { clickHandler(){ store.commit("changeTestMsg", "子组件修改父组件后的文本"); }, clickHandler2(){ store.commit("changeChildText", "子组件修改本身后的文本"); } }, store } </script> <style scoped> .child{ background-color: palegreen; border:1px solid black; height:200px; margin:10px; } </style> 复制代码
最后是vuex的配置文件
import Vue from 'vue' import Vuex from 'vuex'; Vue.use(Vuex) const state = { testMsg: '原始文本', childText:"子组件原始文本" } const mutations = { changeTestMsg(state, str){ state.testMsg = str; }, changeChildText(state, str){ state.childText = str; } } const store = new Vuex.Store({ state: state, mutations: mutations }) export default store; 复制代码
经过该vuex示例,了解vuex的经常使用配置及方法调用。但愿对不怎么熟悉vuex的同窗快速上手vuex项目有点帮助。
由于没太多东西,我本身也是刚接触,本例就不往GitHub扔了,若是尝试了本例,可是没有跑起来的同窗,能够一块儿交流下。
编程重在实践,赶忙去跑一下吧。
若是这篇文章使你有所收获,不胜荣幸。 欢迎点赞,以期能帮助更多同窗!