vue+axios+vuex 入坑基础例子

 

步骤：

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

2、创建实例store

3、传送存储数据

4、读取数据（vuex刷新无数据，使用WEB储存 localStorage 和 sessionStorage）

 

实例化！

1.先设置储存的数据

2.在mutations 写入方法

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

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

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

// 实例化
const store = new Vuex.Store({
    state: { //需要储存的数据
        counts: 1,
        phoneSizeId: ''
    },
    //getters
    getters: { //获取状态及里面的数据
        getTotal(state) { //拿状态集里面的数据
            return state.counts
        }
    },
    // commit
    mutations: { //动作 只能同步操作数据 不能做接口
        // this.$store.commit('increment', this.price) //触发
        increment(state, price) { //state 来改变 cound
            // 变更状态
            state.counts += price
        },

        oneSize(state, phoneSize) { //state 对外通讯
            // 变更状态
            state.phoneSizeId = phoneSize
        },

        decrement() {
            state.counts -= price
        }
    },
    //dispatch
    actions: { //能在这里进行异步的操作 跟后端API接口放这里
        //  this.$store.dispatch('increase', this.price) //触发
        increase(context, price) { //做个中介再去执行
            context.commit('increment', price)
        }
    }
})

 

 告诉VUE挂载上去 注入！

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

 

给vuex注入数据

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

 

输出数据

    computed: {
            setName() {
                if (this.$store.state.shopNames) {
                    return this.$store.state.shopNames;//输出传过来的数据
                } else {
                    return sessionStorage.shopName;//输出浏览器保存的
                }
            }
        },

 

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

基本就处理完毕！