向前之旅，vuex的安装！

最新推荐文章于 2024-09-11 21:42:03 发布

婆婆丁的成长记

最新推荐文章于 2024-09-11 21:42:03 发布

阅读量219

点赞数

文章标签： vue vuex store

本文链接：https://blog.csdn.net/weixin_42855542/article/details/83998746

版权

vue全家桶——vuex。
之前写过一份，回过头来发现，好像自己看的都有点乱，好好的讲vuex却硬要加上axios，把别人搞蒙圈了，所以现在重写一份。仍有不足，请各位多多指点。
首先。3W1H中什么是vuex？
1、what
中文官网说了：（https://vuex.vuejs.org/zh/）
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

通俗的说vuex就是一个仓库，一个商店（store）。

2、why
综上所述，我们为什么使用vuex，在父子通讯中，我们使用props给子组件传递参数 , 但子组件内却不能直接修改父组件传过来的参数，或者数据请求每次都要重新获取，如果我们提前吧所需要的数据放入vuex中，所有组件是不是就可以直接获取？
用官网的说法是：
虽然 Vuex 可以帮助我们管理共享状态，但也附带了更多的概念和框架。这需要对短期和长期效益进行权衡。
如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。
这时候 , 使用 vuex，无疑是最好的选择。

3、when
多组件数据状态的管理。

How：

1、首先是安装vuex

可以再cmd命令指示符中输入

npm install vuex --save

【或者在
文件目录下的名为package.json中，在dependencies对象里添加：

 "vuex": "^3.0.1"

如下图

在这里插入图片描述

在这里插入图片描述
然后可以在自己的编辑器（本人用的是webstorm）的terminal中输入
npm install

】

2、安装完毕我们 src目录下的新建一个store文件夹，里头建一个store.js

在这里插入图片描述
里面新建store.js
接着就可以参考官网：
https://vuex.vuejs.org/zh/guide/

此处使用较简略的方式：

store.js内容如下

import Vue from 'vue'       
import Vuex from 'vuex'      
Vue.use(Vuex)       //在vue中使用vuex。

const state = {             //状态
  count: ""                     //接收
}

const mutations = {      //更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
 increment (state) {      //increment为方法名，自定义
    state.count++          //state.count 对应上面
  }
}

const store = new Vuex.Store({          //此处为核心，new出的store实例，导出后在main.js下接受
  state,
  mutations
})
export default store     //导出，并在src目录下的main.js中导入

3、回到src目录下的main.js，挂载store.js

在src目录下的main.js中导入store.js
在这里插入图片描述
并挂载：（由于属性名和对象名相同，所以同路由一般，简写，完整：store：store）

4、触发定义的方法：

还是那句话：改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。
在src目录中的app.vue中
在这里插入图片描述
store.state 来获取状态对象，以及通过 $store.commit 方法触发状态变更

5、在要调用数据的组件中使用
下码为我自创的组件，案例如下：

<template>
  <div>
    vuex中count的数据：
    {{add}}
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
      computed:{
        add(){
          return this.$store.state.count
        }
      }
  }
</script>
<style></style>

可以看到的是我们能有插值法{{}}放入数值，当然如果是数据的话，比如img的src，这用绑定法 v-bind：（简写：）：

{{add}} ：src=add

最终效果如下：
在这里插入图片描述