六、Vuex介绍
一、Vuex介绍
当我们在Vue对象中定义一个变量时，想要在其他的Vue对象或者js文件中想使用这个变量往往是很不容易的，而且Vue对象中的变量随着Vue销毁而销毁，所以需要一个全局的公共的数据仓库来管理这些变量，让这些变量的可以在任意组件中使用，它有着自身的生命周期，不会随着某一个Vue对象的销毁而销毁
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，它用以在不同的Vue对象中维护一个统一的数据仓库，并记录用户对数据仓库的操作，便于开发者随时了解和追踪数据仓库的变化和来源
二、Vuex基本使用
- 在codesandbox创建一个Vue项目
打开https://codesandbox.io/s/vue
在上面注册一个账号，并新建一个Vue项目
2.添加Vuex依赖
添加Vuex依赖
点击左侧 Add Dependency蓝色按钮，搜索Vuex
选择Vuex依赖
点击第一个Vuex添加
添加Vuex依赖成功
如上图箭头所示Vuex依赖已成功添加
- 引入vuex和初始化vuex仓库
在src目录下新建store文件夹和index.js
vuex仓库
并向index.js增加如下代码
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
CHANGE(state, value) {
state.count = value;
}
},
actions: {
add({ commit, state }) {
commit("CHANGE", state.count + 1);
},
reduce({ commit, state }) {
commit("CHANGE", state.count - 1);
}
}
});
export default store;
在src/main.js新增如下代码
import store from "./store/index";
new Vue({
store,
render: h => h(App)
}).$mount("#app");
修改App.vue为如下代码
<template>
<div id="app">
<button @click="reduce">-</button>
<div>{{count}}</div>
<button @click="add">+</button>
</div>
</template>
<script>
export default {
name: "App",
computed: {
count() {
return this.$store.state.count;
}
},
methods: {
add() {
this.$store.dispatch("add");
},
reduce() {
this.$store.dispatch("reduce");
}
}
};
</script>
<style>
#app {
display: flex;
justify-content: center;
}
</style>
我们的vuex计数器便完成了，点击右侧刷新来查看这个计数器
计数器
三、Vuex概念介绍
- state
state是vuex中的数据仓库，我们把需要存放的数据放到state中，并在页面中通过使用this.$store.state来获取这个数据
定义state
使用state中的数据
- mutations
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件，我们通过定义mutations中的方法来修改state,如下图所示，定义了CHANGE方法，它会把传入的value赋值给state.count
mutations
- action
action 类似于 mutation，不同在于：
- Action 提交的是 mutation，而不是直接变更状态
- Action 可以包含任意异步操作
如下图所示，我们定义了两个action，一个是add负责增加count，另一个是reduce负责减少count，它们通过调用commit('名称', 值)的方式来调用上面定义的mutation实现对state的修改
action定义
在页面中我们通过调用this.$store.dispath('action名称')来调用action
action使用
三、Vuex在不同页面中使用
-
新建一个操作组件,如下图所示我们在components文件夹下新建一个operate.vue组件
操作组件
- 在operate.vue中添加如下代码
<template>
<div class="operate_box">
<input type="number" v-model="count">
</div>
</template>
<script>
export default {
computed: {
count: {
get: function() {
return this.$store.state.count;
},
set: function(value) {
this.$store.dispatch("setCount", value);
}
}
}
};
</script>
- 在App.vue中引入该组件,新增如下代码导入组件
<template>
<div>
<operate></operate>
</div>
</template>
<script>
import operate from "./components/operate.vue";
export default {
components: {
operate
}
};
</script>
- 修改Vuex的store新增setCount方法
const store = new Vuex.Store({
actions: {
setCount({ commit }, value) {
commit("CHANGE", value);
}
}
});
5.可以看到我们在operate.vue中也可以展示和改变Vuex中的数据
Vuex不同组件
