Vue学习28----Vuex 的使用getters，actions

接着：https://blog.csdn.net/zhaihaohao1/article/details/89234464
在27的基础上讲的：

vuex官网：
https://vuex.vuejs.org/zh/guide/

getters
改变state里面的count数据的时候会触发 getters里面的方法 获取新的值 (基本用不到)
调用：
this.$store.getters.computedCount

actions
触发actions中的incMutationsCount----触发mutations中的incCount----触发getters中的computedCount
调用：
this.$store.dispatch(‘incMutationsCount’); /*触发 actions里面的方法 */

这两个基本用不到：

下面是一个例子：
结构：

代码：
store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)


/*1.state在vuex中用于存储数据*/
var state={

  count:1
}

/*2.mutations里面放的是方法，方法主要用于改变state里面的数据
*/
var mutations={

  incCount(){

    ++state.count;
  }
}

/*3、优点类似计算属性   ，  改变state里面的count数据的时候会触发 getters里面的方法 获取新的值 (基本用不到)*/
//state改变就会触发

var getters= {

  computedCount: (state) => {
    return state.count*2
  }
}



/*
4、 基本没有用

Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
*/
//  触发actions中的incMutationsCount----触发mutations中的incCount----触发getters中的computedCount


var actions= {
  incMutationsCount(context) {    /*因此你可以调用 context.commit 提交一个 mutation*/


    context.commit('incCount');    /*执行 mutations 里面的incCount方法 改变state里面的数据*/


  }
}

const store = new Vuex.Store({
  state,
  mutations,
  getters,
  actions,
})

export default store;

main.js

import Vue from 'vue';
import App from './App.vue';

import VueRouter from 'vue-router';
Vue.use(VueRouter);


import Home from './components/Home.vue';
import HomeContent from './components/HomeContent.vue';


const routes = [
  { path: '/home', component: Home },
  { path: '/homecontent', component: HomeContent },

  { path: '*', redirect: '/home' }   /*默认跳转路由*/
]

const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})


new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

App.vue

Home.vue

HomeContent.vue

源码下载：

vuedemo28
https://download.csdn.net/download/zhaihaohao1/11112020