在几分钟内学习vuex在vue中的应用(入门教程)

vuex.js

状态(数据)管理

在vue中，当我们管理数据时，它是混乱的，所以我们需要使用以下库，vuex.js

Vuex简介

每个Vuex应用程序的核心都是存储，用于存储数据

“Store”基本上是一个容器，它包含应用程序中的大部分状态。Vuex在以下两点上不同于简单的全局对象

1.1的状态存储。Vuex反应灵敏

2.您不能直接更改商店中的状态

Vuex有六个概念

存储(最基本的概念)(创建库)状态(数据)Getters(可以说是计算属性)突变Actions Modules让我们看看如何创建库。

存储用于存储数据(状态)

我们放了新的Vuex。以状态存储({})数据

状态：{}让我们看看如何读取里面的数据

下一步，让我们看看如何修改数据

突变： {}我们如何调整突变的数据

使用commit()方法调用

接下来，让我们做一个小效果，看看vuex是如何在vue中应用的

让我们制作一个购物车加减按钮效果

运行效果

div id=' app '/div template id=' TPL ' div tip/tip but/but/div/template script var store=new Vuex。存储({ state:{ count:0 }，突变后的：{ jia (state) { state.count }，Jian(state){ state . count-} })；var vm=new Vue({ el:'#app '，template:'#tpl '，components : { tip :{ template:'div { $ store . state . count } }/div ' })，但是： { template : ' div输入类型=' button ' value=' ' @ click=' $ store.commit(' Jia ')'/input type=' button ' value='-' @ click=' $ store commit(' Jian。/script我们从存储中获得的数据最好放在计算属性中

当一个组件需要获得多个状态时，将这些状态声明为计算属性将是冗余的。为了解决这个问题，我们可以使用mapState辅助函数来帮助我们生成计算属性

下面做一个小效果(注意：标注的计算属性和下面两个使用mapState辅助函数的结果是一样的)

当映射的计算属性的名称与状态的子节点名称相同时，我们也可以将字符串数组传递给映射状态。

运行效果

Script //我们从存储中获得的数据最好放在计算属性中：varstore=new vuex . store({ state : { count :0，num133601，num233602}，突变3360 { Jia(state){ state }。计数}、蹇(州){州。count } Varvm=new vue({ El : ' # app '，template3360' # TPL '，components 3360 { tip 3360 }//创建计算属性//computed : {//count(){//返回此。$ store . state . count；//}，//num1(){ //返回这个。$ store . state . num 1；//}，//num2(){ //返回这个。$ store . state . num 2；//}/}，//使用mapState辅助函数//computed : vuex . mapState({//count : state=state . count，//num1:state=state.num1，//num 2: state=state . num 2/})，//mapstate传递一个字符串数组computed : vuex . mapState([' count '，' num1 '，' num2'])，template : ' div { { count } } { { num 1 } } { { num/脚本以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。