超简单入门Vuex小示例
超简单入门Vuex小示例
写在前面
本文转载自掘金上面的一篇博客，原文地址为： 超简单入门Vuex小示例，项目源代码我已经托管到github上面，源代码地址为：https://github.com/ccf19881030/vuexexample，码云地址为：https://gitee.com/havealex/vuexexample 你可以使用git命令从github上获取vuexexample源代码
git clone https://github.com/ccf19881030/vuexexample.git从码云上获vuexexample取代码：
git clone https://gitee.com/havealex/vuexexample.git本文旨在通过一个简单的例子，练习vuex的几个常用方法，使初学者以最快的速度跑起来一个vue + vuex的示例。
学习vuex需要你知道vue的一些基础知识和用法。相信点开本文的同学都具备这个基础。
另外对vuex已经比较熟悉的大佬可以忽略本文。
生成基于vue的项目
前提是在自己的系统中安装好了Node.js、npm、cnpm等工具，并且配置好了相关的环境变量，然后选择一个趁手的IDE编辑器，我使用的是VSCode。 基于vue-cli脚手架生成一个vue项目，vue-cli是Vue.js 开发的标准工具。 目前vue-cli脚手架已经更新到4.3.1版本，和之前Vue-cli 2.x版本创建项目的方式有一点不同，具体可以参考Vue CLI官网 使用vue-cli 4.x安装@vue/cli依赖，如下：
起步
- 安装
npm install -g @vue/cli
# OR
yarn global add @vue/cli- 创建一个项目：
vue create my-project
# OR
vue uivue-cli 4.x提供了两种创建vue项目的方式，使用vue create命令可以使用命令行创建vue项目，而使用vue ui命令则可以通过ui界面创建vue项目。
关于vue-cli 4.x创建vue项目可以参考创建一个项目，关于老版本的 vue-cli 文档请移步这里 本人使用的是Windows10操作系统，使用VSCode编辑器,使用的node、npm、cnpm、vue-cli版本信息如下图所示：
vue create
运行以下命令来创建一个新项目vuexexample：
vue create vuexexample你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。
选择默认的default (babel, eslint)选项，接着会创建一个基本的vue项目结构，如下图所示：
然后按上图执行项目，进入vuexexample项目根目录并使用npm run serve命令启动vuexexample项目：
cd vuexexample
npm run serve
打开浏览器如Chrome，在地址栏中输入http://localhost:8080，项目如下图所示:
vue create 命令有一些可选项，你可以通过运行以下命令进行探索：
vue create --help用法：create [options] <app-name>
创建一个由 `vue-cli-service` 提供支持的新项目
选项：
-p, --preset <presetName> 忽略提示符并使用已保存的或远程的预设选项
-d, --default 忽略提示符并使用默认预设选项
-i, --inlinePreset <json> 忽略提示符并使用内联的 JSON 字符串预设选项
-m, --packageManager <command> 在安装依赖时使用指定的 npm 客户端
-r, --registry <url> 在安装依赖时使用指定的 npm registry
-g, --git [message] 强制 / 跳过 git 初始化，并可选的指定初始化提交信息
-n, --no-git 跳过 git 初始化
-f, --force 覆写目标目录可能存在的配置
-c, --clone 使用 git clone 获取远程预设选项
-x, --proxy 使用指定的代理创建项目
-b, --bare 创建项目时省略默认组件中的新手指导信息
-h, --help 输出使用帮助信息使用图形化界面
你也可以通过 vue ui 命令以图形化界面创建和管理项目：
vue ui上述命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。
按上图所示：打开浏览器在地址栏中输入http://localhost:8000 使用图形用户界面创建vue项目，如下图所示：
打开【vue项目管理器】，选择项目所在目录，创建一个项目vuexexample，并且安装相应的依赖。
如上图所示，项目名称为vuexexample2，所在目录为：F:\rate\nodeWeb\vuex_demo 点击右下角的【下一步】，
选择默认的预设：babel,eslint，再点击右下角的【创建项目】
对应的命令行中会运行创建项目的命令，创建项目模板。
进入项目目录，使用npm run serve先试着跑一下。
一般不会出现问题，试跑成功后，就可以写我们的vuex程序了。
使用vue完成的示例
安装vuex
使用VScode工具打开刚创建的vuexexample项目，如下图所示：
使用vuex首先得安装vuex，在VSCode中打开终端，进入到vuexexample根目录，执行如下命令：
cnpm install vuex --save
介绍一下我们的超简单Demo，一个父组件Parent，一个子组件Child，父组件有一个数据，子组件有一个数据，想要将这两个数据都放置到vuex的state中，然后父组件可以修改自己的和子组件的数据。子组件可以修改父组件和自己的数据。
代码文件介绍
- store/index.js文件 在根目录src目录下创建一个store文件夹，然后新建一个index.js文件，源代码如下：
import Vue from 'vue'
import Vuex from 'vuex';
Vue.use(Vuex)
const state = {
parentText: '父组件原始文本',
childText:"子组件原始文本"
}
const mutations = {
changeParentText(state, str){
state.parentText = str;
},
changeChildText(state, str){
state.childText = str;
}
}
const store = new Vuex.Store({
state: state,
mutations: mutations
})
export default store;然后在components目录下删除HelloWorld.vue，创建Parent.vue和Child.vue这两个文件。
- Parent.vue组件
<template>
<div class="parent">
<h3>这里是父组件</h3>
<button type="button" @click="onChangeParentText">修改自己文本</button>
<button type="button" @click="onChangeChildText">修改子组件文本</button>
<div>ParentText: {{ msg }} </div>
<child></child>
</div>
</template>
<script>
import Child from './Child.vue'
export default {
computed: {
msg () {
return this.$store.state.parentText;
}
},
methods: {
onChangeParentText() {
this.$store.commit('changeParentText', '父组件修改自己后的文本');
},
onChangeChildText() {
this.$store.commit('changeChildText', '父组件修改子组件后的文本');
}
},
components: {
'child': Child
}
}
</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="onChangeParentText">修改父组件文本</button>
<button type="button" @click="onChangeChildText">修改自己文本</button>
</div>
</template>
<script>
export default {
name: "Child",
computed:{
msg(){
return this.$store.state.childText;
}
},
methods: {
onChangeParentText(){
this.$store.commit("changeParentText", "子组件修改父组件后的文本");
},
onChangeChildText(){
this.$store.commit("changeChildText", "子组件修改自己后的文本");
}
}
}
</script>
<style scoped>
.child{
background-color: palegreen;
border:1px solid black;
height:200px;
margin:10px;
}
</style>- 修改App.vue 将HelloWorld.vue组件移除掉，换成Parent.vue
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<Parent msg="Welcome to Your Vue.js App"></Parent>
</div>
</template>
<script>
import Parent from './components/Parent.vue'
export default {
name: 'App',
components: {
Parent
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>- main.js
- 修改main.js文件，引入store/index.js，并将vuex注入到Vue实例中，这样在Parent.vue和Child.vue组件中可以使用vuex做状态提交等操作。
import Vue from 'vue'
import App from './App.vue'
import store from './store/index.js'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
store
}).$mount('#app')运行vuexexample项目
npm run serve
最终项目的运行初始效果图如下图所示：
- 如果想通过父组件触发子组件的数据，就点“改变子组件文本”按钮，点击后效果如下：
- 如果想通过子组件修改父组件的数据，就在子组件点击“修改父组件文本”按钮，点击后效果如下：
后记
通过该vuex示例，了解vuex的常用配置及方法调用。希望对不怎么熟悉vuex的同学快速上手vuex项目有点帮助。 编程重在实践，赶紧去跑一下吧。 为了方便，我将完整的项目上传到github上，源代码地址为：https://github.com/ccf19881030/vuexexample，，码云地址为：https://gitee.com/havealex/vuexexample
你可以使用git命令从github上获取源代码
git clone https://github.com/ccf19881030/vuexexample.git从码云上获取项目源代码：
git clone https://gitee.com/havealex/vuexexample.git参考资料
- 超简单入门Vuex小示例
- 超级简单入门vuex 小实例
- Vue CLI
- https://github.com/vuejs/vue-cli Standard Tooling for Vue.js Development https://cli.vuejs.org/
- Vue.js官网
- vuex
- Awesome Vue packages
- awesome-vue A curated list of awesome things related to Vue.js