Vuex使用状态介绍

现在，基于上一篇文章对为什么要使用Vuex的介绍和理解，我们用Vuex中的State这一个正面的例子来加以印证，同时也介绍VUES的核心概念。

Vuex使用单一状态树——。是的，一个对象包含所有应用程序级状态。此时，它作为一个独特的数据源存在(SSOT)。这也意味着每个应用程序将只包含一个存储实例。单一状态树使我们能够直接定位任何特定的状态段，并且可以在调试期间轻松地拍摄整个当前应用程序状态的快照。

单一状态树与模块化并不冲突。在接下来的章节中，我们将讨论如何将状态和状态变化事件分配给每个子模块。

Vuex的使用

介绍Vuex

方法1(推荐):

首先，我们在Vue的开发环境中安装vuex :JS2.0。

npm安装vuex -保存

方法2:

1.将“vuex”: '^3.0.0'添加到package.json中的dependencies字段后：

依赖项' : {'Vue' :' 2.5.2 '，' Vue-router' :' 3.0.1 '，' Vuex' :' 3.0.0'}，2。终端光盘到项目目录，然后运行项目

使用Vuex

1.将：添加到src/main.js全局

从“vue”导入vue，从“导入应用程序”。/app“从导入路由器”。/router///从' vuex '全局加入vueximport vuex使用此vuexVue.use(Vuex)//介绍我们单独的Vuex文件导入{store} from '。/store/store ' vue . config . production tip=false/* eslit-disable no-new */new vue({ El : ' # app '，//将store对象提供给“store”选项，该选项可以将store的实例注入到所有子对象中它可以缩写为storestore3360store。//所有组件对象都有一个附加属性：$ storerouter，components: { app }，template 3360 ' app/' })

2.在src目录下创建一个新的存储文件夹；在此文件夹下创建一个新的store.js文件。store.js中的代码如下：

//安装vuex从' vue '导入vue从' vuex '导入vue . use(vuex)export const store=new vuex . store({ state : }//将页面显示数据写入store.js文件goodsList: [{name: '赣州橙'，price: '8.8' }，{name: '新疆哈密瓜'，price: '2.0' }，{ name 3: '山东枣'获取数据。

由于vuex的状态存储是响应性的，从存储实例中读取状态的最简单方法是在计算属性中返回一个状态，或者直接使用$ store.state.attribute名称来获取Vuex中的数据。通过在根实例中注册store选项，$store实例将被注入到根组件下的所有子组件中，并且可以通过它访问子组件。$商店。

第3.vue页和第4.vue页代码：

第3页. vue

模板div h2我是第一页/h2br router-link to='/page4 '查看第二页/router-link ul class=' ul _ list ' liv-for=' list '中的项目' p class=' name '商品：{{item.name}}/P p class='price '价格：{ { item }。price } }/p/Li/ul/div/模板脚本导出默认{ data(){ return {//直接作为数据()使用list:this。$ store.state.goodslist，}}，mounted(){//use//this . list=this。$ store.state.goodslist}通过钩子函数。//计算属性computed: {list() {//获取存储中的数据返回此。$ store . state . goods list；} }，}/脚本组件仍然保持本地状态

使用Vuex并不意味着需要将所有状态都放入Vuex。虽然将所有状态放入Vuex会使状态变化更加明确和易于调试，但也会使代码变得繁琐和不直观。如果某些状态严格属于单个组件，最好将其用作组件的本地状态。您应该根据您的应用程序开发需求进行权衡和确定。

影响

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。如果你想了解更多，请查看下面的相关链接