基于VUEX的公共存储器store的快速上手流程

vuex的快速安装与使用

• ​​store公共存储器​​

• ​​state.js添加数据元​​
• ​​mutations.js创建一个方法​​
• ​​在组件中提交：​​
• ​​在组件中使用：​​

store公共存储器

在使用之前请先在终端下载好vuex,​​$ npm install vuex --save​​​。然后在mian.js中引入
​​​import Vue from 'vue'<br> import Vuex from 'vuex'<br> Vue.use(Vuex)​​

state.js添加数据元

vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。：

export default {
    count:9,
    count2:88,
    count3:33,
    str:"hello world",
    arr:["9.9元","106.8元","5.12元"],
    todos:[
      {id:1,text:"子涵1",vip:true}, 
      {id:2,text:"子涵2",vip:false}
    ]
  }

mutations.js创建一个方法

export default{
    // 通过store.commit('方法名',附加参数)调用  
    //创建方法  increAdd 第一个参数:接收state状态属性,第二个参数之后,是组件中调用该方法时传递的参数
    increAdd(sta,a){
        // sta.count += a;
        //或者
        this.state.count += a;
    },
    jian(state,n=1){//参数n默认值为1
      state.count -= n;
    }
}

在组件中提交：

this.$store.commit(“getshopId”, v);

在组件中使用：

$store.state.getshopId;
[1]: ​​​http://meta.math.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference​​​ [2]: ​​https://mermaidjs.github.io/​​ [3]: ​​https://mermaidjs.github.io/​​ [4]: ​​http://adrai.github.io/flowchart.js/​​