zoukankan      html  css  js  c++  java
  • vue+axios+vuex 入坑基础例子

    步骤:

    1、下载安装vuex,或者引入

    2、创建实例store

    3、传送存储数据

    4、读取数据(vuex刷新无数据,使用WEB储存 localStorage 和 sessionStorage)

    实例化!

    1.先设置储存的数据

    2.在mutations 写入方法

    3.用 this.$store.commit('方法名', 提交过去的数据) //触发

    4.在mutations 写入方法里面处理完

    5.在VUE的计算方法输出数据

     1 // 实例化
     2 const store = new Vuex.Store({
     3     state: { //需要储存的数据
     4         counts: 1,
     5         phoneSizeId: ''
     6     },
     7     //getters
     8     getters: { //获取状态及里面的数据
     9         getTotal(state) { //拿状态集里面的数据
    10             return state.counts
    11         }
    12     },
    13     // commit
    14     mutations: { //动作 只能同步操作数据 不能做接口
    15         // this.$store.commit('increment', this.price) //触发
    16         increment(state, price) { //state 来改变 cound
    17             // 变更状态
    18             state.counts += price
    19         },
    20 
    21         oneSize(state, phoneSize) { //state 对外通讯
    22             // 变更状态
    23             state.phoneSizeId = phoneSize
    24         },
    25 
    26         decrement() {
    27             state.counts -= price
    28         }
    29     },
    30     //dispatch
    31     actions: { //能在这里进行异步的操作 跟后端API接口放这里
    32         //  this.$store.dispatch('increase', this.price) //触发
    33         increase(context, price) { //做个中介再去执行
    34             context.commit('increment', price)
    35         }
    36     }
    37 })

     告诉VUE挂载上去 注入!

    1 new Vue({ //實例對象
    2     el: '#app', //裝載到什麼位置,標籤 ID CLASS
    3     router, //用来渲染 外部引入的App组件  router:h=>h(App) 内置方法
    4     store, //全局使用
    5     template: '<App/>', //裝載 什麼樣的東西 HTML代碼 片段 模板
    6     components: { App }
    7 })

    给vuex注入数据

    1         methods: {
    2             loadId(data, shopNames) {
    3                 this.$router.push({ name: 'shopGoodsList', params: { id: data }, query: data })
    4                 this.$store.commit('increment', shopNames) //触发
    5                 sessionStorage.shopName = shopNames;
    6             }
    7         }

    输出数据

    1     computed: {
    2             setName() {
    3                 if (this.$store.state.shopNames) {
    4                     return this.$store.state.shopNames;//输出传过来的数据
    5                 } else {
    6                     return sessionStorage.shopName;//输出浏览器保存的
    7                 }
    8             }
    9         },

    刷新后数据会消失?就这么处理!sessionStorage保存!

    基本就处理完毕!

     
  • 相关阅读:
    杭电OJ-1031_Design T-Shirt
    杭电OJ-1036_Average is not Fast Enough!
    2019杭电多校一 L. Sequence (NTT)
    Binary Table CodeForces
    2019牛客多校一 H. XOR (线性基)
    Jzzhu and Numbers CodeForces
    Geometers Anonymous Club CodeForces
    [笔记] 扩展卢卡斯
    Luogu P2183 [国家集训队]礼物 扩展卢卡斯+组合数
    Luogu P4901 排队 fib数列+树状数组+倍增
  • 原文地址:https://www.cnblogs.com/hasubasora/p/7491001.html
Copyright © 2011-2022 走看看