Javascript - Vue - vuex
2024-09-22 00:14:00
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"
}
})
Vue.use(Vuex)
var store = new Vuex.Store({
//state:数据存储仓库
state: {
txt: "hello"
}
})
var vm = new Vue({
el: "#box",
store: store
})
el: "#box",
store: store
})
现在可以在项目中的任何可以使用js的文件中访问store
<div id="box">
{{$store.state.txt}}
</div>
{{$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
//存储
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>
<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);
}
}
};
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);
}
}
});
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.clear() //移除所有数据
更多关于localStorage的信息,参考:localStorage使用总结
最新文章
- [LeetCode] Shortest Word Distance II 最短单词距离之二
- sql例子
- js 数组赋值问题 :值传递还是引用?
- 模式串匹配KMP详解
- Maven+SpringMVC+Mybatis 开发环境整合
- ios 75个工具
- Python使用cx_Oracle模块连接操作Oracle数据库
- MySQL 批量Dll操作(转)
- 修改linux系统时间和同步
- 从async await 报错Unexpected identifier 谈谈对上下文的理解
- MySQL复制之实践篇
- XIX Open Cup named after E.V. Pankratiev. GP of Poland(AMPPZ-2018)
- 02-JavaScript语法
- 解决Python中PyCharm导入模块时,模块名下出现红色波浪线的问题
- MySQL 数据库规范--调优篇(终结篇)
- Imperial roads 非严格次小生成树
- linux基础操作1
- 【RabbitMQ】4、RabbitMQ几种Exchange 模式
- webrtc学习: 部署stun和turn服务器
- php 爬取数据