vuex存储数据,vuex怎么实现存储和取值
本文主要介绍了Vuex数据的存储和采集方法，具有很好的参考价值。希望对你有帮助。如有错误或不足之处，请不吝赐教。
目录
Vuex数据存储与采集下面的例子引自官网(Start Vuex)。可以举个实际应用的例子：Vuex存储和取值(通俗易懂)
Vuex数据存储与获取
因为最近需要对原项目进行改造，之前也没有认真学习过vuex的使用，所以今天把学习官方文档的过程记录下来，以备将来参考，也希望能为其他开发者提供参考。
vuex的核心是商店，本质上是仓库，可以存储大部分状态。这种存储是有响应的。如果状态改变，相应的组件也将响应更新。如果你想改变状态，你需要提交突变。
以下示例引用自官网（开始 Vuex）
//创建新的存储实例
const store=createStore({
state () {
返回{
计数：0
}
},
突变：{
增量(状态){
状态.计数
}
}
})
创建之后，您可以用这个提交vue组件中的状态变更。$store.commit(特定变异方法)
然后，通过这个将一个statex具体化来获得对象的内容。$store.state.x
如果希望更容易地从store实例中读取状态，可以直接在computed中返回状态：
//创建计数器组件
常量计数器={
模板：` div{{ count }}/div `，
计算值：{
计数(){
返回store.state.count
}
}
}
但是为了避免多次启动dom，vue插件可以将follower组件中的store实例注入到所有子组件中，子组件可以通过$store访问。
常量计数器={
模板：` div{{ count }}/div `，
计算值：{
计数(){
归还这个。$store.state.count
}
}
}
当我们需要多个状态时，我们可以使用mapState来生成计算属性。
计算值：{
localComputed () { /*.*/},
//使用对象扩展运算符将此对象混合到外部对象中。
.mapState({
//.
})
}
可以举一个实际应用的例子
首先，在main.js中注册
从“vuex”导入Vuex
Vue.use(Vuex)
const store=new Vuex。商店({
//存储全局状态
状态：{
计数：0
},
//getters是状态的处理包，比如过滤一些数据等。它是一个只读方法，通过return获得值。
getters:{
countNum(州){
返回`账号为${state.count}
}
}
//通过突变修改状态。如果直接修改状态，某些功能将会丢失。
突变：{
添加(状态){
状态.计数
},
减去(州){
状态。计数-
}
}
//动作涉及的是业务逻辑，而不是页面的一些行为。
})
在对应的vue组件中，如果下面的代码可以在页面上显示count的值，那么就可以在vue的一个组件中执行下面的操作，比如app.vue
模板
差异
h1{{count}}/h1
h2{{countNum}} /h2
/div
/模板
脚本
从“vuex”导入{mapState，mapGetters}
导出默认值{
//
计算值：{
.mapState([count])
.mapGetters{[countNum]}
}
}
/脚本
如果要在突变中使用该方法，可以同时在另一个vue文件中进行如下操作，比如hello.vue，为了方便观察，可以在控制台中选择vuex，实时观察vue内容。
模板
差异
Button @click=addnum /button
/div
/模板
方法：{
.地图突变(加，减)
addnum(){
//必须通过提交来使用突变，但是因为.之前调用过mapMutations，可以直接调用this . add()；
//这个。$store.commit(add )
this.add()
//使用突变会确保有vuex状态变化的记录，如果这样也会生效。直接使用$store.state.count。
//这个。$store.state.count .但是，在这个编写开发工具vuex中无法生成任何记录。
}
}
java描述语言
/javascript
一般简单的业务逻辑要用突变写，复杂的业务逻辑要用动作写。
Vuex存值与取值(简单易懂)
组件存储值
方法：{
fn() {
这个。$ store.commit (setvalue ，xxx)//Setvalue存储的值可以随便命名，xxx要存储的值。
}
}
在store.js的状态下
常量状态={
Xxx: ，//初始化存储值的名称。
}
store.js中的Matution
setValue(状态，项目){
state.xxx=item//第二个参数可以随意命名。
},
组件内部值
//取计算属性中的值，js直接写出来取值，html用直接xxx。
计算值：{
value() {
归还这个。$ store . state . XXX；
}
},
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。