vuex的使用
程序员文章站
2024-02-28 12:19:16
...
npm install vuex --save
vuex下面store.js里面的内容:
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
// 声明一个常量
const state={
count:1
}
//操作变量的方法
const mutations={
add(state){
state.count += state.count;
},
reduce(state){
state.count--;
},
fn(state){
console.log(state)
debugger
}
}
const actions = {
add(context) {
context.commit("add");
},
reduce(context) {
context.commit("reduce");
},
fn(context){
context.commit("fn");
debugger
}
}
// 外面使用需要进行暴露
export default new Vuex.Store({
state,
mutations,
actions
// state,
// actions,
// getters,
// mutations
})
页面应用:
<template>
<div>列表 {{count}}
<button @click="$store.commit('add')">点击</button>
<button @click="add()">页面点击</button>
</div>
</template>
<script>
export default {
name: "list",
data(){
return{
}
},
computed:{
count:function(){
return this.$store.state.count // 读取vuex的值
}
},
methods: {
add(){
this.$store.dispatch("add")
}
}
}
</script>
vuex 使用的场景:
- 涉及到非父子关系的组件,例如兄弟关系、祖孙关系,甚至更远的关系;
- 他们之间如果有数据交互,那么应该使用Vuex来实现;
- 如果页面复杂度比较低的话,也可以考虑使用
global-event-bus
来实现; - 如果只是父子关系的组件数据交互,那么应该考虑使用props进行单向传递;
- 如果涉及到子组件向父组件的数据传递,那么应该考虑使用
$emit
和$on
;