1. npm i vuex@3
2. Vue.use(Vuex)
3. store
4. vc==>store
5. vue2 中 只能使用 vuex 的 3 版本
vue3 中 只能使用 vuex 的 4 版本
6. store/index.js
//改文件用于创建vuex 最为核心的 store
import Vue from 'vue'
//引入vuex
import Vuex from 'vuex'
Vue.use(Vuex)
// 准备actions ---用于响应组件中的动作
const actions={}
//准备mutations--用于操作数据（state）
const mutations={}
//准备state --用于存储数据
const state={}
// 创建store 暴露store
export default new Vuex.Store({
actions,
mutations,
state
})
7.main.js
/**
* 该文件是整个项目的入口文件
*/
//引入Vue
import Vue from 'vue'
// 引入App 组件 他是所有组件的父组件
import App from './App.vue'
//import store from './store/index.js'
// index.js 默认加载
import store from './store'
//关闭vue 的生产提示
Vue.config.productionTip = false
// const Demo=Vue.extend({})
// const d=new Demo();
// Vue.prototype.x=d;
// 创建Vue 实例对象--vm
new Vue({
//将 app 组件放入到容器中
render: h => h(App),
store,
beforeCreate(){
Vue.prototype.$bus=this // 安装全局事件总监
}
}).$mount('#app')
8. App.vue
<template>
<div>
<Count></Count>
</div>
</template>
<script>
import Count from './components/Count.vue';
export default {
name: 'App',
components:{
Count
},
mounted(){
console.log('appvue',this)
}
}
</script>
<style>
</style>
9. Count.vue
<template>
<div>
<h1>当前求和位{{ sum}}</h1>
<select v-model.number="n">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<button @click="increment">+</button>
<button @click="dectement">-</button>
<button @click="incrementOdd">>当前和为奇数在加</button>
<button @click="incrementWait">等一等在加</button>
</div>
</template>
<script>
export default {
name:'Count',
data(){
return {
n:1,
sum:0
}
},
mounted(){
console.log('countvue',this)
},
methods:{
increment(){
this.sum+=this.n
},
dectement(){
this.sum-=this.n
},
incrementOdd(){
if(this.sum%2){
this.sum+=this.n
}
},
incrementWait(){
setTimeout(()=>{
this.sum+=this.n
},500)
}
}
}
</script>
<style>
button{
margin-left: 10px;
}
</style>