新建vue项目
main.js
import Vue from 'vue'
import App from './App.vue'
import store from "@/store";
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
store
}).$mount('#app');
app.vue
<template>
<div id="app">
<h1>根组件
- {{ $store.state.title }}
- {{ $store.state.count }}
-- {{ title }}
-- {{ count }}
</h1>
<input type="text" placeholder="请输入标题" v-model="newTitle" id="t1">
<input type="text" placeholder="请输入数字" :value="count" @input="handleInput" id="num">
<son-a :newTitle="newTitle"></son-a>
<hr>
<son-b></son-b>
</div>
</template>
<script>
import SonA from "@/components/SonA"
import SonB from "@/components/SonB"
import { mapState} from 'vuex'
export default {
name: 'App',
data(){
return {
newTitle:''
}
},
methods:{
handleInput(e){
//实时获取输入框的值
console.log(+e.target.value);
const num = +e.target.value;
//提交mutation函数,修改
this.$store.commit('changeCount',num);
}
},
components:{
SonA,
SonB
},
computed:{
...mapState(['count','title'])
},
created() {
//检查vuex是否安装成功
console.log(this.$store);
console.log(this.$store.state.count);
}
}
</script>
<style>
</style>
index.js
//存放是vuex的相关代码
import Vue from 'vue'
import Vuex from 'vuex'
//插件安装
Vue.use(Vuex);
//创建仓库
const store = new Vuex.Store({
//通过state可以提供数据
//严格模式,上线时需要关闭,否则影响性能
strict:true,
state:{
title:'仓库大标题',
count:100
},
//通过mutation,可以提供修改数据的方法
mutations:{
//加法,第一个参数,都是state
addOne(state){
state.count += 1;
},
addFive(state){
state.count += 5;
},
addCount(state,n){
state.count += n;
},
changeTitle(state,newTitle){
state.title = newTitle;
},
subCount(state,n){
state.count -= n;
},
changeCount(state,newCount){
state.count = newCount
}
},
// 3 actions 异步处理
// actions中不能直接操作state,也是需要提交mutation
actions:{
changeCountAction(context,num){
//这里settimeout是模拟发后台异步处理
setTimeout( () => {
context.commit('changeCount',num);
},1000);
}
}
});
//导出给main.js使用
export default store;
//获取store
// 1 this.$store
// 2 import 导入 store
//模板中 {{ $store.state.xxx}}
//组件逻辑中 this.$store.state.xxx
//js模板中 store.state.xxx
SonA.vue
<template>
<div class="box">
<h2>SonA子组件</h2>
从Vuex中获取的值: <label for="">{{ $store.state.count }}</label>
<br>
<button @click="addOne">值 + 1</button>
<button @click="addFive">值 + 5</button>
<button @click="handleAdd(10)">值 + 10</button>
<button @click="handleAdd(20)">值 + 20</button>
<button @click="changeFn">改标题</button>
<button @click="handleChange">一秒后修改666</button>
</div>
</template>
<script>
export default {
name: "SonA",
//父传子
props:{
newTitle: String
},
methods:{
handleAdd(n){
//错误代码,不可以这样使用
//this.$store.state.count++
//应该通过mutation核心概念,进行数据修改
this.$store.commit('addCount',n);
},
addOne() {
//加1
this.$store.commit('addOne');
},
addFive(){
//加5
this.$store.commit('addFive');
},
changeFn(){
//改标题
this.$store.commit('changeTitle',this.newTitle);
},
handleChange(){
this.$store.dispatch('changeCountAction',666);
}
}
}
</script>
<style scoped>
.box{
border: 2px solid #cccccc;
width: 400px;
padding: 10px;
margin: 20px;
}
</style>
SonB.vue
<template>
<div class="box">
<h2>SonB子组件</h2>
从vuex中获取的值:<label for="">{{ count }}</label>
<br>
<button @click="handleSub(1)">值 - 1</button>
<button @click="subCount(5)">值 - 5</button>
<button @click="subCount(10)">值 - 10</button>
<button @click="changeTitle('前端程序员')">改标题</button>
<button @click="changeCountAction(888)">一秒后改成888</button>
</div>
</template>
<script>
import { mapState, mapMutations, mapActions} from 'vuex'
export default {
name: "SonB",
computed:{
//展开数据,形成同名计算属性
...mapState(['count'])
},
methods:{
//展开修改方法,
...mapMutations(['subCount','changeTitle']),
//展开异步方法
...mapActions(['changeCountAction']),
handleSub(n){
this.$store.commit('subCount',n);
}
}
}
</script>
<style scoped>
.box{
border: 2px solid #cccccc;
width: 400px;
padding: 10px;
margin: 20px;
}
</style>