vuex使用记录
- 2020 年 3 月 26 日
- 笔记
副标题：vuex使用详解、vue使用全局变量、vue使用 store
这篇博客主要记录了 vuex的使用方法，简单的翻译了官方文档加上一点自己的理解。
附上官方文档的链接，想更进一步了解vuex的朋友可以看看：https://vuex.vuejs.org/
有些文章里面会把 vuex称作 store，这是因为 vuex里最常用的就是 Store类，绑定到vue环境时也是以 $store 绑定的。我们先简单了解一下这5个概念。
一、相关概念
按照官方文档的说法，vuex有5个核心概念，分别是 state、getters、mutations、actions和 modules。
state相当于只读变量，组件可以访问 state变量的值，但是不能直接对其进行修改。注意我这里说的是不能直接进行修改，不是不能修改。想要修改 state里变量的值必须要通过 mutations。
getters就是我们通常所说的 getters，在 getters里可以访问到所有的 state变量，我们可以方便的用 getters定义一些需要计算的值。
mutations用来修改 state的变量。在 mutations里定义的函数可以修改任意 state变量的值，在组件中通过 store对象的 commit方法调用相关的 mutations函数。
actions的功能和 mutations差不多，唯一的区别就是在 mutations中只支持同步的操作，而在 actions中支持异步操作（可以在组件中进行链式调用，类似 axios）。另外我们还可以在 actions中调用 mutations。在组件中通过 store对象的 dispatch方法来调用 actions里的方法。
modules有点像命名空间，将逻辑关系相近的变量和操作放到一个 module中，个人感觉一般情况用不上这个功能，感兴趣的可以看一下官方文档：https://vuex.vuejs.org/guide/modules.html
二、如何在 vue中使用 vuex
了解了相关概念之后，我们进入实战，如何在 vue项目中使用 vuex。
第一步先在项目中安装 vuex，使用下面的命令：
npm install --save vuex 或者 cnpm install --save vuex
然后创建一个 store.js文件，内容如下：
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { }, mutations: { }, actions: { }, getters: { } })
我们可以把有关 vuex的代码全部放在这个文件里，但是现在我们还没有把 vuex添加到 vue的环境中，还要打开 main.js文件做一点修改：
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import store from './store' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', store, components: { App }, template: '<App/>' })
这里我们做的操作主要是 import上面创建的 store文件，然后将 store对象添加到 vue的初始化参数里。这样我们就可以在 vue的组件中通过 this.$store 来访问 store对象了。
下面我们看看怎么在组件里使用 store.
我们现在 store.js文件中定义一些 state变量
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { count: null, }, mutations: { increase(state) { // count自增 state.count++ } }, actions: { initCount(state) { console.log('init') // 初始化 count，模拟网络请求 return new Promise((success, reject) => { // 延时5000毫秒初始化count setTimeout(() => { state.count = 0; success(); }, 5000) }) } }, getters: { doubleCount(state) { // 返回2*count return 2 * state.count } } })
然后创建一个 Count组件，代码如下：
// Count.vue <template> <div> <div>count: {{count?count:'未初始化'}}</div> <div>doubleCount: {{count?doubleCount:'未初始化'}}</div> </div> </template> <script> export default { name: 'Count', data(){ return { } }, mounted(){ this.$store.dispatch('initCount').then(()=>{ setInterval(()=>{ // 每隔 1s count自增一次 this.$store.commit('increase') }, 1000) }) }, computed: { // 使用 computed动态更新 count的值，直接放在 data中不能动态更新 // 因为直接放在 data中的话只是一个赋值操作 count(){ return this.$store.state.count }, doubleCount(){ return this.$store.getters.doubleCount } } } </script>
// App.vue <template> <div id="app"> <Count></Count> </div> </template> <script> import Count from "./components/Count.vue" export default { name: 'app', components: { Count } }; </script> <style> * { padding: 0; margin: 0; } html, body, #app { width: 100%; height: 100%; color: #2c3e50; } #app { display: flex; justify-content: center; align-items: center; } </style>
运行结果：
未初始化
