Vuex的使用和简单的例子(计数器)

前段时间去学习，因为需要用vue。然而，匆忙之中，vuex并没有接触到它。今天在业余时间看了关于vuex的文章，做了一个小演示，记录了vuex的简单使用过程。

Vuex是什么？

Vuex是专门为vue.js应用开发的状态管理模式。当多个视图依赖于同一个状态或者多个视图可以改变某个状态时，共享状态被全局提取和管理。

介绍Vuex(前提是项目已经使用Vue脚手架工具构建)

1.使用npm包管理工具安装vuex。只需在控制命令行中输入以下命令。

Npm install vuex - save需要注意的是save必须添加到这里，因为我们将在生产环境中使用您的包。

2.创建一个新的store文件夹(这不是必须的)，并在文件夹下创建一个新的store.js文件，并在文件中引入我们的vue和vuex。

从“Vue”导入Vue；从“Vuex”导入Vuex；3.使用我们的vuex，然后参考使用Vue.use。

vue . use(Vuex)；通过这三个步骤，vuex就可以成功报价，然后我们就可以尽情的玩了。

4.将新创建的vuex文件引入main.js

从“”导入存储配置。/Vuex/store' 5，然后在实例化vue对象时添加store对象：

Newvue ({el:' # app '，路由器，商店，//使用storetemplate :' app/'，组件： {app}})以下是计数器的示例

在src目录下创建一个存储文件夹。

src/store.js

从' vue '导入Vue从' vuex'Vue.use(Vuex)const store导入Vuex=new Vuex。Store({ state: { count: 0，show: '' })，getter s : { count :(state)={ return state . count } }，mutation : { increments :(state)={ state . count }，减量：(state)={ state }。count-}，changxt :(state，v)={state。show=v}})导出默认storeestate是我们必需的状态，该状态只能通过提交更改来更改，例如：

Handleincrement () {this。$ store.submit ('increment')}加载的提交方法：

changobj(){这个。$ store . submit(' changxt '，this.obj)}当然，load也可以是一个对象，这样就可以提交多个参数。

changobj(){这个。$ store . submit(' changxt '，{key:''})}将store.js引入main.js

从“”导入存储。/store/store ' export default new vue({ El : ' # app '、路由器、商店、组件： {app}、模板3360' app/'})在组件中使用

在构建中，您可以通过$ store.state.count获取状态。

您只能通过提交突变来更改状态。

templatediv类=' store ' p { $ store . state . count } }/p El-button @ click=' handleIncrement ' strong/strong/El-button El-button @ click=' handledeclaration ' strong/strong/El-button HR H3 { { $ store . state . show } }/H3 El-input占位符='请输入内容' v-model=' obj ' @ change=' changobj ' clearable/El-input/div/templatescriptionexportdefault { data(){ return { obj : ' ' }，methods33$store.commit('increment') }，handle judiction(){ this。$ store.commit(' decision ')}，changobj () {this。$ store.commit(' changxt '，这个。obj)} }/脚本这个演示就在这里。

我感觉整个过程就是一个传递数据的过程，有点类似于全局变量，但是vuex是有响应的。

当然，我们在这里没有充分发挥vuex。

Vuex还在学习，这篇文章主要是为了记录它简单的使用过程。

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