vuex从零开始搭建的实现

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