Javascript - Vue - vuex

vuex

这是一个与vue配套的公共数据管理工具，可以将一些需要共享的数据保存到vuex中，以此方便项目中的任何组件都可以从vuex中得到共享数据。cnpm i vuex -S 装包

读取数据

//在main中导入vuex然后挂载在vue对象上

import Vuex from "vuex"
Vue.use(Vuex)

var store = new Vuex.Store({
    //state：数据存储仓库
    state: {
        txt: "hello"
    }
})

var vm = new Vue({
    el: "#box",      
    store: store 
})

现在可以在项目中的任何可以使用js的文件中访问store

<div id="box">
    {{$store.state.txt}}
</div>

操作数据

虽然可以使用$store.state.txt=xx的方式直接操作数据，但vuex并不建议这样做，更高级的方法是使用vuex的mutations，操作数据的代码方法放在mutations中，然后通过$store调用操作方法处理数据。mutations内的方法最多接收两个参数，第一个固定为state，另一个是自定义参数。

<div class="btn-2" @click="add">test</div>

var store = new Vuex.Store({
    //state：数据存储仓库
    state: {
        txt: "hello"
    },
    //代理执行对数据的操作
    mutations: {
        add(state) {
            state.txt += "worlld";
        }
    }
});

var vm = new Vue({
    el: "#box",      
    store: store,
    methods: {
        add: function () {
            this.$store.commit("add");
        }
    }
})

包装数据

如果需要对数据进行包装处理，可以使用getters，获取数据的时候就不再直接调用$store.state.xx

var store = new Vuex.Store({
    //存储
    state: {
        count: 0
    },
    //操作
    mutations: {
        add: function (state, num) {
            state.count += num;
        },
        remove: function (state, num) {
            state.count -= num;
        }
    },
    //包装，可以对仓储的数据进行包装或计算
    getters: {
        wrapperValue: function (state) {
            return "当前数量" + state.count;
        }
    }
});
//获取包装的数据：$store.getters.wrapperValue

持久化存储

vue路由机制使不需要刷新浏览器地址就可以静态加载组件到客户端页面上显示，而vuex默认的存储机制也只是在不刷新的前提下存储数据，如果向持久化存储数据，则需要使用js原生的对象localStorage，将数据存储在localStorage中，刷新浏览器页面后需要从vuex的store中读取数据，则可以把localStorage的数据放到vuex中。

<template>
    <div>
        <input type="text" ref="input">
        <button @click="add">持久化存储</button>
        {{$store.state.x}}
    </div>
</template>

export default {
    methods: {
        add: function () {
            var x = this.$refs.input.value;
            this.$store.commit("add", x);
        }
    }
};

在main.js中

var x = localStorage.getItem("x") || ""; 
var store = new Vuex.Store({
    state: {
        x: x,//将本地存储库的数据放到vuex的仓储中
    },
    mutations: {
        add: function (state, str) {
            state.x += str;
            localStorage.setItem("x", state.x);
        }         
    }
});

刷新浏览器后数据依然存在

localStorage.removeItem("key") //移除指定的数据
localStorage.clear() //移除所有数据

更多关于localStorage的信息，参考：localStorage使用总结

Javascript - 学习总目录