vuex是什么?
首先来最简单的,vuex有一个store对象,这个对象就相当于一个存放数据的仓库,所有组件都可以共享这个仓库的数据,看如下图:
似乎感觉看懂了什么对吧?
store这个数据仓库是不是很神奇?谁要用谁去拿就得了,初期了解vuex就这么简单。
总结:
1、vuex能够集中管理共享的数据,易于维护和开发
2、能够高效的实现组件之间的共享数据源,提高开发效率
3、存储在vuex中的数据都是响应式的,能够实时保持数据与页面的同步
了解了概念之后,如何实现呢?
1、首先需要vue-cli项目的搭建,没了解的朋友请移步–>>https://cli.vuejs.org/zh/guide/cli-service.html
vue-cli安装完成后cmd:
2、没了解的node.js请https://www.runoob.com/nodejs/nodejs-tutorial.html
node安装完成之后
cmd命令查看:
npm:
创建vue-cli项目,有经验的可以跳过
(cmd来到d盘下,新建一个vue-cli项目)
vue create wky-vue-cli
等待安装:
成功创建项目:
目录结构:
Vuex
首先我们要明白,我们需要干什么??我们是不是需要创建两个组件??然后创建一个vuex的store进行数据的保存?然后让那两个组件都能拿到store里面的值?vuex在哪里?凭空产生?当然要安装,如果嫌麻烦就不要学啦~~~·好,继续
安装vuex
第一步:打开cmd,来到项目目录的根目录下
我的教程路径是 d:wky-vue-cli
第二步:执行安装vuex的命令
npm install vuex --save
或者
yarn add vuex
等待安装
安装完毕
去哪里看我已经安装成功了呢?
1、打开根目录下的package.json
2、打根目录下的node_modules
找到veux,说明以及安装
第三步:在src下新建一个store目录,store
下新建一个index.js
文件(不要嫌麻烦,按照教程走下去)
①导入vue的依赖
import Vue from 'vue'
②导入vuex的依赖
import vuex from 'vuex'
更多看如下注释:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)//注册vuex
const stores= new Store({
state:{//state就是共享数据的仓库,这个可以存放单个对象,可以存放单个数据,可以存放一个数组
},
})
export default stores//导出vuex
***第四步***来到根目录下的main.js文件
只需要添加两行代码,其他不要动
import store from './store'//导入store目录下的main.js文件
store,//注册到Vue中
根目录下的main.js文件如下:
import Vue from 'vue'
import App from './App.vue'
import store from './store'//默认会导入store目录下的main.js文件
Vue.config.productionTip = false
new Vue({
store,//注册到Vue中
render: h => h(App),
}).$mount('#app')
第五步 好,,继续下一步,store
共享数据的小仓库有了,下一步干嘛呢?总需要注册两个组件吧?不然怎么知道store
是不是共享的?
在src/store/index.js下的 state
里定义一个数据conut
如下:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)//注册vuex
const store= new Vuex.Store({
state:{//state就是共享数据的仓库,这个可以存放单个对象,可以存放单个数据,可以存放一个数组
count:1
},
mutations:{
onClicks(state){
state.count+=1;
// alert(state.count)
}
},
})
export default store//导出vuex
在/src/components
目录下新建一个test.vue文件
<template>
<button @click="onClick">点击+</button>
</template>
<script>
export default {
methods:{
onClick(){
this.$store.commit("onClicks")
//请认真读完:只要点击会提交commit.onClicks函数,这个函数在vuex中(也就<br>是/src/store/index.js下的mutations对象下的onClicks函数会执行)会去执行,src/store/index.js下的onClicks函数,他只干了一件事,那就是使用state仓库的数据没点击一次都count加1
}
}
}
</script>
/src/components下新建Data.vue文件,该文件的就是用来获取state数据(仓库)的数据
<template>
<div>
<p>{{$store.state.count}}</p>//$store.state.count就是获取state的数据的 {{}}是vue的内联表达式
</div>
</template>
注册组件,使其显示在App.vue中
打开src/App.vue
文件
导入自己刚刚写的那两个组件
import test from './components/test.vue'
import Data from './components/Data.vue'
注册组件
components: {
// HelloWorld,
test,
Data
}
展示组件
<template>
<div id="app">
<Data/>
<test />
</div>
</template>
完整App.vue代码
<template>
<div id="app">
<Data/>
<test />
</div>
</template>
<script>
// import HelloWorld from './components/HelloWorld.vue'
import test from './components/test.vue'
import Data from './components/Data.vue'
export default {
name: 'app',
components: {
// HelloWorld,
test,
Data
}
}
</script>
测试,cmd 来到d:\wky-vue-cli下
执行npm run serve
打开浏览器访问
localhost://8080
效果:每点击一次都会+1