改变vuex里面state的值,vuex获取state
本文主要介绍了vuex中的状态属性，具有很好的参考价值。希望对你有帮助。如有错误或不足之处，请不吝赐教。
目录
State属性介绍状态。使用vuex的扩展状态单状态树，在VUE组件中获得VueX状态映射状态辅助函数。
state属性介绍
状态属性在Vuex中用于存储组件之间共享的数据；也就是说，我们主要在state属性中存储一些组件之间的共享状态；它使用单个状态树——来用一个对象包含所有应用级状态。这也意味着每个应用程序将只包含一个store实例。单个状态树允许我们直接定位任何特定的状态段，并且可以在调试期间轻松地拍摄当前应用程序状态的快照。
state的使用
在HTML中，我们可以直接省略这个关键字，直接使用$ store.state.state名称(变量名)来访问vuex中的$ store.state
拉出来的state.js文件。
导出默认值{
loadingFlag: true，
//用于保存选中的类别标签
changedablelist:[
{name: headline ，class: icon font icon-jinrishouru ，URL: topnews/index}，
{名称：苹果，类别：图标字体图标-苹果，网址：苹果/指数 }，
{名称： NBA ，类别： icon font icon-tiyu-秋兰，url: nba/index }，
{名称：创业，类别： icon字体icon-chaxunchuangyebankaitongqingkuang ，网址： startup/index}，
{名称：足球，类别：图标字体图标-swticonzuqiu ，URL:足球/指数 }，
{名称：运动，类别：图标字体图标-跑步，URL:体育/指数 }
]
}
在index.js文件中导入state.js文件并注册。
从“vue”导入Vue
从“vuex”导入Vuex
从导入突变。/突变
从导入状态。/state
从导入操作。/操作
从导入getters。/getters
//安装插件
Vue.use(Vuex)
//创建一个对象
导出默认的新Vuex。商店({
状态，
突变，
行动，
吸气剂
})
用于组件。
div class=弹性内容
div class= lable-items v-for=(item，index)in $ store . state . changed ablelist :key= index @ click= decrement type lable(index)
div class=item
divi :class=item.class/i/div
span{{ item.name }}/span
/div
/div
/div
在js代码中，必须使用这个。$store.state状态名(变量名)访问vuex中存储的状态；
计算值：{
title() {
归还这个。$route.meta.title
},
changedlabelist(){
归还这个。$ store . state . changed ablelist
},
alternativablelist(){
归还这个。$ store . state . alternativablelist
}
},
扩展
为什么应该在组件的computed calculation属性中使用，而不是在data属性中使用？
data中的内容只会在创建的hook函数被触发之前初始化一次，类似于我们直接写const data={foo: 123}的时候。此时属性的值是纯文字的，而不是所谓的【缓存】(没有缓存缺失的缓存在哪里？)。JS文字显然不会在赋值后自动更新。
最简单的例子：
let= XXX //相当于状态中的数据
let=b//相当于在数据初始化的时候把b的值赋给a。
b= XYZ //此时，对于原类型，A必须仍然是 xxx
换句话说，当数据中的内容依赖关系改变时，数据属性不会改变(它的设计目标是保存组件的本地状态数据)。Computed是通过依赖跟踪实现的。当计算的求值中引用的Vue变量发生变化时，它将触发计算的重新计算。因此，我们可以使用computed来引用Vuex状态变量，从而使依赖跟踪有效。或者，将Vuex状态变量映射到mapState()方法计算也是一个方便的选择。
vuex的State
是state Vuex中的基础数据，所谓的state就是存储在state中。不使用状态时，直接在数据中初始化。有了状态，我们将把数据从数据转移到状态。
单一状态树
Vuex使用单个状态树，即一个对象包含所有的状态数据。也就是说，如果我们定义了一个store实例，那么这个store实例中只有一个状态。作为状态构造器选项，定义了我们需要的所有基本状态参数。
单个状态树允许我们直接定位任何特定的状态段，并且可以在调试期间轻松地拍摄当前应用程序状态的快照。
在Vue组件中获得 Vuex 状态
从store实例读取状态的最简单方法是在计算属性中返回状态。
示例：
例如，我们在状态中定义了一个count属性，并将其赋值为10。store.js文件的内容如下：
从“vue”导入Vue/导入Vue
从“vuex”导入Vuex/导入Vuex
Vue.use(Vuex)
常量状态={
计数：10
}
导出默认的新Vuex。商店({
状态
})
然后创建一个计数器组件，并在组件中返回count，内容如下：
常量计数器={
模板：` div count的值为：{{ count}}/div `，
计算值：{
计数(){
return . state . count//返回存储实例的计数状态
}
}
}
每当store.state.count发生变化时，count属性将被重新计算，并且界面将被刷新。
此模式依赖于全局管理员存储。如果有更多的模块，那么每个模块或页面都必须引入存储，只要它使用这种状态的数据。这样的操作真的有点难受。于是出现了下面的解决方案。
Vuex提供了一种机制，通过store选项将根组件的状态“注入”到每个子组件中：
新Vue({
埃尔： #app ，
存储；//根组件通过store选项将store实例注入到其所有子组件中
//子组件
组件：{ Counter }，
模板：` 1
div class=" app "
计数器/计数器
/div
`
})
Vue项目index.html文件的内容如下：
！声明文档类型
超文本标记语言
头
meta charset=utf-8
标题侠客岛/标题
/头
身体
H1欢迎来到霞客岛/h1
div id=app/div
/body
/html
最后，我们使用npm run dev运行项目，浏览器中的输出结果如下图所示。如果我们更改count in state的值，页面将自动刷新：
mapState辅助函数
当一个组件需要获得多个状态时，将所有这些状态声明为计算属性会有些重复和多余。为了解决这个问题，我们可以使用mapState辅助函数来帮助我们生成计算属性，这样你就可以少按几次键了。
示例：
在使用mapState函数之前，您需要先介绍一下它：
从“vuex”导入{ mapState }
在它被引进之前，你不能开始使用它。它有两种用途。它可以接受一个对象或一个数组。
对象用法如下：
从“vuex”导入{ mapState }
导出默认值{
//下面两种方式都可以写。
计算的：mapState({
//组件中的每个属性函数都会得到一个默认的参数state，然后通过state直接得到它的属性。
count: state=state.count
//count 直接映射到state对象中的计数，相当于这个。$store.state.count
计数：“计数”
})
}
数组的用法如下：
//当map的计算属性名称与state的子节点名称相同时，我们也可以向mapState传递一个字符串数组。
导出默认值{
Computed: mapState([ //array
“计数”
])
}
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。