标签：vue actions 概念 state 实例 mutation 组件 Vuex store

Vuex概念

Vuex专门为vue.js应用程序开发的状态管理模式——实现各个组件间的数据的共享
Vuex采用集中式存储来管理应用中所有组件的状态。
常见的应用状态：
用户登录状态
购物车信息
社交平台中的通知

vuex本质上就是vue的一个插件

• 安装
  第一种：在通过vue create命令创建脚手架，选取vuex
  第二种：通过npm npm install --save vuex
  状态管理建议存储在src store/index.js中

  store仓库
  仓库中 — 物品 state
  — 库管员 getters
  — 搬运工
  — 货车

import vue from ‘vue’;

import vuex from 'vuex';
Vue.use(vuex);
export default new Vuex.Store({
	//...
});

vuex的核心是store，store是一个容器，包含着应用程序中的状态。

核心概念

• state
  定义了应用程序中的状态，其可以包含任何类型的数据，如string，number

state:{
	username:'Tom',
	age:23,
	//true表示男 false女
	sex:true
}

在组件中访问state的数据
store是一个全局单例对象，store对象会自动注入到每一个组件中。

单例模式：永远只能产生一个对象的模式 例如：前端控制器

在输出时{{this.$store.state.xxx}}
在脚本中this.$store.state.xxx

注意：在输出时，this加不加都行，在脚本中，必须加this

在输出时{{$store.state.xxx}}
在脚本中this.$store.state.xxx

在输出时这么写：

在脚本中这么写：

• getter
  允许在vuex中定义计算属性，getters的返回值会缓存起来，只有当依赖值发生变化时才会发生变化
  //写在export default中

getters:{
	//计算属性
	//1.state,代表（自动）当前store中的state内的全部状态
	//2.在使用时作为计算属性出现
	getNumber(state){
		return state.products.length;
	}
},

//输出时

<h2>{{this.$store.getters.getNumber}}</h2>

state既可以作为属性，也可以作为方法使用
作为属性时，可以缓存，作为方法时，不缓存
当state作为属性时，表示的是store中所有的state(状态/数据)

• mutations – 搬运工

mutations:{
	//1.state将自动注入到当前方法中
	//2.state代表当前store中state内的全部状态
	//3.state形参在调用时无需传递
	addAgeMutation(state){
		state.age++
	},
	//4.payload称为载荷，实质上就是调用方法时需要传递的其他参数值
	addProductMutation(state,payload){
		state.products.push(payload);
	}
}

更改vuex的store中的状态的唯一方法是提交mutation
提交mutation

this.$store.commit(MutationName[??])

payload译为载荷，就是其他参数，可以为任意数据类型

• actions – 货车
  actions类似于mutations，不同的是：
  A. actions可以包含任意的异步操作；而mutations不能包含异步操作
  B. actions可以提交的是mutations，而不能直接变更state
  分发actions – 货车(指派任务)

this.$store.dispatch(actionsName,[,payload])

context
context会自动注入到当前方法中，代表当前的所有state，getter，mutations，actions

实例具体步骤：

1. 使用脚手架，自己创建或者使用现成的，我使用的是现成的脚手架
2. store中的index.js是用来保存数据(应用程序)的
3. 在views文件目录下，创建2个vue文件 Access1 Access2
4. 在router下的index.js文件添加上边2个vue文件的路由
5. 在继承终端打开vue文件检查，命令时npm run serve
6. 给vue文件中的div添加信息
7. 在组件中访问state中的数据{{}}，输出和脚本都得写
8. 在脚本中添加新的商品信息，用数组保存数据信息
9. 循环遍历输出商品信息内容
10. 存储组件中共享的状态getters
11. 输出时，带入组件中共享的状态{{}}
12. 在每个商品信息的后边加链接 点击链接即可查看商品的详细信息
13. 在views下创建详细信息组件products.vue，并在router中的index.js添加新路由
14. 输出时，取出商品的id
    提示： 冒号” : ”代表{{}}是可以动态变化的
    
15. 在商品详细信息插件中写脚本，获取被点击商品的id和信息
16. 在getters中写一个state作为方法实现获取商品信息的函数，然后在商品详细信息的组件中用这个方法获取商品信息
17. 将获取到的商品详细信息赋给一个新的变量
18. 在输出详细信息时，引用新变量输出商品的各个详细信息
19. 在views下新建一个页面组件 (ChangeAge.vue 按钮 点击一次 年龄+1)
20. 给新ChangeAge.vue组件添加路由
21. 输出一下state里的age
22. 给按钮绑定事件，在脚本中(export default --> methods)写触发事件的方法
23. 因为修改store中的state只能提交mutation，所以在mutation中写触发事件方法
24. 在新组件中提交mutation，此时新组件和Access组件数据未连接，只要enter所有数据都刷新
25. 在app.vue父组件中写3个链接，就可以实现共享状态
    
26. 在views下添加一个新组件Addproduct.vue，导入页面组件路由，在app.vue中添加链接(新组建用来添加新商品及信息) 内容：输入内容表单和确认添加的按钮
27. 给按钮添加事件，在新组件中对表单进行双向绑定，并在新组件内写脚本返回存储的数据，并写出按钮事件的方法
28. 提交新输入的商品信息用一个方法：appProductMutation(state,payload)
29. 在新组件中的脚本中的按钮事件方法下调用appProductMutation()
    
30. 将数据以对象的形式组织在一起，赋给新变量，然后提交mutation
    
31. 因为actions可以包含任意的异步操作，引入actions，actions通过mutation提交新值，然后mutation再修改state
32. 发送AJAX将信息从WEB服务器请求回来
33. 需要准备axios，服务器，并配置好axios – 在main.js中配置axios
34. index.js中先引入axios，异步请求时，不能this，直接axios.get(’/’).then(res=>{});接口前要加http://127.0.0.1:3000端口
35. 新建一个文件夹作为服务器文件夹，因为要发送HTTP服务，所以安装express模块
36. 目前脚手架的地址是8080，自己的服务器端口是3000，一定会出现跨域问题
37. 安装cors 解决服务器和脚手架端口号不一致的问题
38. 打开server目录，创建一个app.js
39. 加载express，cors模块，创建express实例，指定监听端口
40. 解决跨域问题
    
41. app.js里创建接口(路由)
    
42. actions下向WEB服务器发送异步请求(这里有一点点小问题)
43. 创建一个新组件Serverdata.vue，导入页面组件路由，在app.vue中添加链接，在Serverdata.vue中添加按钮
44. 在Serverdata.vue中写脚本，在methods中给按钮写事件方法，分发actions
    
45. context表示所有的state，getter，mutation，actions，所以actions中通过mutation添加新值时，context相当于state
46. 在actions中通过提交mutations来异步获取到的数据
    
47. 所有步骤完成之后，刷新一次，数据就消失了，所以vuex需要和webStorage一起使用

标签：vue,actions,概念,state,实例,mutation,组件,Vuex,store
来源： https://blog.csdn.net/Janner668/article/details/113917880

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。