详细解释如何在vue-cli中使用vuex

前言

众所周知，vuex是专门为vue.js应用开发的状态管理模式。在构建大中型单页应用程序时使用vuex可以帮助我们更好地管理组件外部的状态。而vue-cli是vue的官方支架，可以帮助我们方便地配置webpack。这样，我们很有可能需要同时使用vue-cli和vuex

如何在vue-cli中使用vuex

项目建设和vuex的增加

当我们使用vue-cli构建一个vue项目时(假设项目名称为learn-vuex)，构建完成后的文件目录如下

首先使用npm install - save-dev vuex将vuex添加到依赖项中，然后介绍如何在组件中使用vuex，大致可以分为以下两种形式。

使用商店选项

如果vue-cli构建成功，那么src目录中会有一个main.js文件。main.js的主要功能是将项目中的顶层app.vue组件挂载到DOM中，其他所有组件都可以看作app.vue的子组件。

在main.js中，执行以下操作

从“vue”导入Vue从“App”导入。/App“从导入路由器”。/router '从' Vuex '导入Vuex '；vue . config . production tip=false//注意下面的代码vue . use(Vuex)；const store=new Vuex。Store({ state: {}，getters: {}，actions: {}，mutation s : { })；//注意路由器选项，这里写的相当于组件中的store : store newvue({ El : ' # app '，路由器，store，components: { app }，template3360' app/'})，所以可以通过这个使用store实例。$商店

如果项目中有很多vuex选项需要配置，我们应该将vuex的相关代码划分为不同的模块

在src下创建一个新的存储文件夹，并在该文件夹中创建以下文件

我们可以随意设置文件名，但是最好通过文件名来判断这个文件是干什么的。

Index.js:集成各种模块，创建并导出vuex实例rootState.js:配置状态选项getter . js:getter选项variations.js: variations选项variations . js:variations选项在index.js中，我们需要

从“Vue”导入Vue；从“Vuex”导入Vuex；从“”导入状态。/RootState . js '；从“”导入getters。/getter s . js '；从“”导入突变。/ventures . js '；从“”导入操作。/actions . js '；vue . use(Vuex)；const store=new Vuex。存储({状态、获取者、动作、突变})；导出默认存储；其余四个文件配置几乎相同，以rootState.js为例

const state={ count: 0，arr: [0，1，2，3，4，5]}导出默认状态；这样，在main.js中，我们需要编写更少的代码

从“vue”导入Vue从“App”导入。/App“从导入路由器”。/router“从导入存储”。/store/index '；Vue . config . production tip=false new vue({ El : ' # app '，路由器，存储，组件： {app}，模板3360' app/'})在vue原型链上装载vuex实例

这是一种非主流的方式，主要是受到了axios的启发。这里有一个博客解释如何在vue组件中使用axios。之所以将axios安装在vue原型链上，是因为axios不能通过vue.use使用

在这种方法中，我们需要

//要用“import”命令加载的vue构建版本//(仅运行时或独立)已在webpack.base.conf中用别名进行了设置。从“Vue”导入Vue“从App导入”。/App“从导入路由器”。/router“从导入存储”。/store/index '；Vue . config . production tip=false//在vue中使用Vuex之前，必须调用vue.use方法vue . use(Vuex)；//在vue原型上挂载哪个属性由我们决定。//在配置众多的情况下，我们也可以拆分Vue。原型。$ store=newvuex.store ({state: {}，getters 3360 {}，actions 3360 {}，variations 3360 { })；//如果没有store选项newvue ({el:' # app '、路由器、组件： {app}、template3360' app/'})，vuex仍然可以通过此选项使用。$商店

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。