vue学习十六(vuex)

本文主要是介绍vue学习十六(vuex)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

- - 概念
  - 实例

概念

Vuex是用来管理组件之间通信的一个插件

state：用来存放组件之间共享的数据。他跟组件的data选项类似，只不过data选项是用来存放组件的私有数据。

getters：有时候，我们需要对state的数据进行筛选，过滤。这些操作都是在组件的计算属性进行的。如果多个组件需要用到筛选后的数据，那我们就必须到处重复写该计算属性函数；或者将其提取到一个公共的工具函数中，并将公共函数多处导入 - 两者都不太理想。如果把数据筛选完在传到计算属性里就不用那么麻烦了，getters就是干这个的，你可以把getters看成是store的计算属性。getters下的函数接收接收state作为第一个参数。那么，组件是如何获取经过getters过滤的数据呢？过滤的数据会存放到$store.getters对象中

mutations：前面讲到的都是如何获取state的数据，那如何把数据存储到state中呢？在 Vuex store 中，实际改变状态(state) 的唯一方式是通过提交(commit) 一个 mutation。　　mutations下的函数接收state作为参数，接收一个叫做payload（载荷）的东东作为第二个参数，这个东东是用来记录开发者使用该函数的一些信息，比如说提交了什么，提交的东西是用来干什么的，包含多个字段，所以载荷一般是对象（其实这个东西跟git的commit很类似）还有一点需要注意：mutations方法必须是同步方法！

有几个步骤：

1 在mutations选项里，注册函数函数里面装逻辑代码。
2在组件里，this.$store.commit('change',payload) 注意：提交的函数名要一一对应
3触发函数，state就会相应更改
4在组件的计算属性里 this.$store.state 获取你想要得到的数据

actions：既然mutations只能处理同步函数，我大js全靠‘异步回调’吃饭，怎么能没有异步，于是actions出现了…

actions和mutations的区别
1.Actions 提交的是 mutations，而不是直接变更状态。也就是说，actions会通过mutations，让mutations帮他提交数据的变更。
2.Action 可以包含任意异步操作。ajax、setTimeout、setInterval不在话下

context：context是与 store 实例具有相同方法和属性的对象。可以通过context.state和context.getters来获取 state 和 getters。

dispatch：翻译为‘派发、派遣’的意思，触发事件时，dispatch就会通知actions（跟commit一样一样的）参数跟commit也是一样的。

action的大体流程：
1、在actions选项里添加函数（异步）并提交到对应的函数（在mutation选项里）中 context.commit(‘changeAsync’,value);

2.　在组件里： changeNumAnsyc:function(){this.$store.dispatch(‘add’, 5);} 将dispatch“指向”actions选项里的函数
3.　在mutations选项里，要有对应的函数 changeAsync:function(state,a){console.log(state.num +=a);}

实例

我们通过一个例子看理解下上面的概念

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script><script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script><script src="https://unpkg.com/vuex@2.0.0"></script>
</head><body><div id="app"><hello></hello></div>
</body><script>var myStore = new Vuex.Store({state: {//存放组件之间共享的数据name: "jjk",age: 18,num: 1},mutations: {//显式的更改state里的数据change: function (state, a) {//  state.num++;state.num += aconsole.log(state.num);},changeAsync: function (state, a) {state.num += aconsole.log(state.num);}},getters: {getAge: function (state) {return state.age;}},actions: {//设置延时add: function (context, value) {setTimeout(function () {//提交事件context.commit('changeAsync', value);}, 1000)}}});Vue.component('hello', {template: `<div><p @click='changeNum'>姓名：{{name}} 年龄：{{age}} 次数：{{num}}</p><button @click='changeNumAnsyc'>change</button></div>`,computed: {name: function () {return this.$store.state.name},age: function () {return this.$store.getters.getAge},num: function () {return this.$store.state.num}},mounted: function () {console.log(this)},methods: {changeNum: function () {//在组件里提交// this.num++;this.$store.commit('change', 10)},//在组件里派发事件 当点击按钮时，changeNumAnsyc触发-->actions里的add函数被触发-->mutations里的changeAsync函数触发changeNumAnsyc: function () {this.$store.dispatch('add', 5);}},data: function () {return {// num:5}}})new Vue({el: "#app",data: {name: "dk"},store: myStore,mounted: function () {console.log(this)}})
</script></html>

浏览器输入file:///Users/zhiliao/zhiliao/vue/index_test.html
在这里插入图片描述