VueX（VueX是专门为Vue.jsapp开发的状态管理模式）
浏览：219 次
1、 VueX公司
1.关于VueX
VueX是一种适用于Vue项目开发的状态管理工具。想象一下，如果您在项目开发期间频繁使用组件参数传递方法来同步数据中的值，那么一旦项目变得非常大，管理和维护这些值将非常困难。为此，Vue为多个组件（VueX）经常使用的值提供了统一的管理工具。在使用VueX的Vue项目中，我们只需要在VueX中定义这些值，这些值可以在整个Vue项目的组件中使用。
1.2安装
由于VueX是在学习VueCli之后进行的，请参考VueCli2.x构建的目录以获取下面的项目目录。
以下步骤的前提是您已经完成Vue项目的构建并将其传输到项目的文件目录。
Npm安装Vuex
npm i vuex-s
纱线安装Vuex
纱线添加vuex
在项目的根目录下添加一个存储文件夹，并创建索引。文件夹中的js
│ App.vue公司
│ 主.js
│
├─资产
│ logo.png
│
├─组件
│ HelloWorld.vue公司
│
├─路由器
│ 索引.js
│
└─百货商店
索引.js
一点三
1.3.1初始化索引内容。商店中的js
从“Vue”导入Vue
从“Vuex”导入Vuex
//装载Vuex
Vue.use（Vuex）
//创建VueX对象
const store=新Vuex.store({
状态：{
//存储的键值对是要管理的状态
名称：'helloVueX'
}
})
导出默认存储
1.3.2将存储附加到当前项目的Vue实例
打开main.js
从“Vue”导入Vue
从“./App”导入app
从“./router”导入路由器
从“./store”导入存储
Vue.config（版本配置）。productionTip=假
/*eslint禁用无新*/
新Vue({
el:“#app”，
路由器，
Store，//Store：与路由器一样，Store将我们创建的Vuex实例装载到此Vue实例
渲染：h=>h（app）
})
1.3.3在组件中使用Vuex
例如，在App中。vue，我们需要取状态中定义的名称，并将其显示在h1标签中：
<模板>
名称：
｛｛$store.state.name｝｝
或用于组件方法：
...,
方法：{
添加（）{
console.log（this.$store.state.name）
}
},
...
1.4安装Vue开发工具VueDevtools
在Vue项目开发中，需要监控项目中的各种值。为了提高效率，Vue提供了浏览器扩展VueDevtools。
VueDevtools.png
2、 VueX中的核心内容
在VueX对象中，不仅有状态，还有用于操作状态中数据的方法集，以及处理状态中数据所需的方法集。
成员列表：
状态存储状态，基本数据
变异提交和更改同步数据的方法，以及为操作状态成员设置的方法，如添加、删除和修改数据
getter将状态成员处理到外部世界，并使用getter存储缓存值以筛选状态成员
行动就像一个装饰师。它们包裹突变并异步操作
模块化Vuex状态管理
2.1 VueX的工作流程
Vuex流程图.png
首先，如果Vue组件在调用VueX方法时需要请求后端或异步操作，则需要使用dispatch VueX中的actions方法来确保数据同步。可以说，存在动作是为了使突变中的方法能够在异步操作中工作。
如果没有异步操作，我们可以直接提交组件中状态中的Mutations中编写的方法，以对状态成员执行操作。请注意，第1.3.3节中提到，不建议直接操作组件中处于状态的成员，因为VueDevtools无法监视直接修改（例如：this.$store.state.name='hello'）。最后，修改后的状态成员将呈现到组件的原始位置。
2.2突变
变异是一组操作状态数据的方法，例如修改、添加和删除数据。
2.2.1突变的使用
mutations方法具有默认参数：
（[状态][，有效载荷]）
状态是当前VueX对象中的状态
有效载荷用于在调用方法时传递参数
例如，我们编写了一个方法，可以在执行时将下面示例中的名称值更改为“jack”。我们只需要这样做：
从“Vue”导入Vue
从“Vuex”导入Vuex
Vue.use（Vuex）
const store=新Vuex.store({
状态：{
名称：'helloVueX'
},
突变：{
//Es6语法，相当于edit:function（）｛…｝
编辑（状态）{
状态name=“千斤顶”
}
}
在组件中，我们需要以这种方式调用突变——例如，在App.vue的方法中：
this.$store.commit（编辑）
2.2.2突变值转移
在实际生产过程中，在提交某个突变时，有必要为方法带来一些参数。
提交单个值时：
this.$store.commit（'编辑'，15）
什么时候
