Vuex是什么
是一个专为cue.js应用程序开发的状态管理模式,集中式存储管理,解决多组件通信
特点:
- vue官方搭配，专属使用 (类似于：vue-router)，有专门的调试工具
- 集中式管理数据状态方案 (操作更简洁)
data() { return { 数据, 状态 }} - 数据变化是可预测的 (响应式)
Vuex的主要内容:
- state： 统一定义公共数据（类似于data(){return {a:1, b:2，xxxxxx}}）
- mutations ： 使用它来修改数据(类似于methods)===更改state中的数据必须使用mutations来进行更改
- getters： 类似于computed(计算属性，对现有的状态进行计算得到新的数据-------派生 )
- actions： 发起异步请求
- modules： 模块拆分
怎么样在新老项目里面安装vuex
- 情况1：在老项目中使用。 先额外安装vuex包，然后在配置。
- 情况2：在新项目中使用。 在配置vue-cli中创建项目时，就可以直接选中vuex项，这样就不用做任何配置了（脚手架会自动帮我们完成的）。具体如下图示：
![### Vuex是什么
是一个专为cue.js应用程序开发的状态管理模式,集中式存储管理,解决多组件通信
特点:
- vue官方搭配，专属使用 (类似于：vue-router)，有专门的调试工具
- 集中式管理数据状态方案 (操作更简洁)
data() { return { 数据, 状态 }} - 数据变化是可预测的 (响应式)
Vuex的主要内容:
- state： 统一定义公共数据（类似于data(){return {a:1, b:2，xxxxxx}}）
- mutations ： 使用它来修改数据(类似于methods)===更改state中的数据必须使用mutations来进行更改
- getters： 类似于computed(计算属性，对现有的状态进行计算得到新的数据-------派生 )
- actions： 发起异步请求
- modules： 模块拆分
怎么样在新老项目里面安装vuex
- 情况1：在老项目中使用。 先额外安装vuex包，然后在配置。
- 情况2：在新项目中使用。 在配置vue-cli中创建项目时，就可以直接选中vuex项，这样就不用做任何配置了（脚手架会自动帮我们完成的）。具体如下图示：
![### Vuex是什么
是一个专为cue.js应用程序开发的状态管理模式,集中式存储管理,解决多组件通信
特点:
- vue官方搭配，专属使用 (类似于：vue-router)，有专门的调试工具
- 集中式管理数据状态方案 (操作更简洁)
data() { return { 数据, 状态 }} - 数据变化是可预测的 (响应式)
Vuex的主要内容:
- state： 统一定义公共数据（类似于data(){return {a:1, b:2，xxxxxx}}）
- mutations ： 使用它来修改数据(类似于methods)===更改state中的数据必须使用mutations来进行更改
- getters： 类似于computed(计算属性，对现有的状态进行计算得到新的数据-------派生 )
- actions： 发起异步请求
- modules： 模块拆分
怎么样在新老项目里面安装vuex
- 情况1：在老项目中使用。 先额外安装vuex包，然后在配置。
- 情况2：在新项目中使用。 在配置vue-cli中创建项目时，就可以直接选中vuex项，这样就不用做任何配置了（脚手架会自动帮我们完成的）。具体如下图示：
这里只说明第1种情况。
在旧项目中使用vuex
假设之前已经有一个vue项目了，其中并没有使用vuex，现在我们来用一下。
注意，这里省略用vue脚手架创建项目的过程。
整体步骤：
-
安装。它是一个独立的包，需要先安装。
-
配置 store/index.js
- 创建Vuex.store实例
- 向Vue实例注入store
-
使用。在组件中使用store
安装包
进入项目目录，安装包
npm install vuex
开发依赖 ： npm i xxxx --save-dev ; npm i xxxx -D ;
生产依赖： npm i xxxx --save ; npm i xxxx -S; npm i xxxx
实例化store
与router一样，当我们在项目中使用vuex之后，为了方便代码维护，我们一般需要做特殊的目录调整，约定的结构如下：
|--src
|----- main.js
|----- store
|----------- index.js
在store/index.js 中放置具体的代码，具体如下：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
}
})
export default store
向Vue实例注入store
在src/main.js中：
- 导入store
- 并注入Vue实例
// 省略其他
// 1. 导入store
import store from './store'
new Vue({
// 省略其他...
store // 2. 注入Vue实例
})
state:
state的作用是:
用来保存公共数据(多组件公用的数据)
state是响应式的:
如果修改了数据,相应的在视图上的值也会变化
state的使用:
在组件中，通过this.$store.state.属性名来访问。
在模板中，则可以省略this而直接写成： {{$store.state.属性名}}
mutations:
mutations的作用:
通过调用mutations来修改定义在state中的公共数据。
mutations的语法格式:
```js
new Vue.store({ state:{}, // 省略其他...
mutations：{ // 每一项都是一个函数，可以声明两个形参
mutation名1：function(state [, 载荷]) { },
mutation名2：function(state [, 载荷]) {
},
}})
```
每一项都是一个函数，可以声明两个形参：
- 第一个参数是必须的，表示当前的state。在使用时不需要传入
- 第二个参数是可选的，表示载荷，是可选的。在使用时要传入的数据
使用格式:
this.$store.commit('mutation名', 实参，给第二个参数)
这里的commit是固定的方法, 要想触发mutations中的 函数 必须使用commit 来触发
getters:
作用:对state中的数据进行加工,得到新的数据(类似于计算属性) 语法 :
getters:{getter的名字(state){return xxx}}
//访问
this.$store.getters.xxx
应用场景: 计算价格
Vuex-state-mutations-getters 小结:
vuex维护公共数据，主要有两个动作：
- 定义数据:
- 提供获取/修改数据的方法
state用来定义数据
getters用来获取数据
mutations用来修改数据
action
作用:
action中通过调用mutation来修改state,而不是直接变更状态
action可以包含任意的异步请求(例如ajax请求)操作
定义格式:
```js
new Vuex.store({
// 省略其他...
actions: {
// context对象会自动传入，它与store实例具有相同的方法和属性
action的名字: function(context, 载荷) {
// 1. 发异步请求, 请求数据
// 2. commit调用mutation来修改/保存数据
// context.commit('mutation名', 载荷)
}
}
})
```
调用格式
在组件中通过this.$store.dispatch('actions的名字', 参数)来调用action
modules
作用: 拆分模块,把复杂的场景按模块来拆开
格式:
```
export default new Vuex.Store({
// state: 用来保存所有的公共数据
state: {},
getters: {},
mutations: {},
actions: {},
modules: {
模块名1： {
// namespaced为true，则在使用mutations时，就必须要加上模块名
namespaced: true,
state: {},
getters: {},
mutations: {},
actions: {},
modules: {}
}，
模块名2： {
// namespaced不写，默认为false，则在使用mutations时，不需要加模块名
state: {},
getters: {},
mutations: {},
actions: {},
modules: {}
}
}
})
```
访问模块中的mutations/actions:
- 如果namespaced为true，则需要额外去补充模块名
- 如果namespaced为false，则不需要额外补充模块名
使用了modules之后，在访问数据时就要额外添加modules的名字了。
结论： 在使用modules时，建议都给加上namespaced!
