(精华2020年5月14日更新) vue实战篇 vuex的使用和vuex辅助函数的使用

(精华2020年5月14日更新) vue实战篇 vuex的使用和vuex辅助函数的使用

vuex的基本使用
store.js

import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);
//定义属性
var state = {count:6,country:'中国'
};//定义getters
var getters = {count(state){unt},isEvenOrOdd(state){unt%2==0?'偶数':'基数';}
}//定义mutation，处理状态（数据）的改变
var mutations = {increment(state,payload){  debugger   unt = unt + payload.data},incrementAsync(state,payload){//异步操作var p=new Promise((resolve,reject) => {setTimeout(() => {resolve();},3000);});p.then(() => {unt = unt + payload.data}).catch(() => {console.log('异步操作');});}
}//定义actions，要执行的操作，如流程判断、异步请求等
var actions = {// increment(context,payload){//     contextmit('increment',payload)// },increment({commit},payload){debuggercommit('increment',payload)},incrementAsync({commit,state},payload){//异步操作var p=new Promise((resolve,reject) => {setTimeout(() => {resolve();},3000);});p.then(() => {commit('increment',payload);}).catch(() => {console.log('异步操作');});}
}//创建store对象
var store = new Vuex.Store({state,getters,mutations,actions
})//导出store对象
export default store;

main.js挂载store.js

import Vue from 'vue'
import App from './App.vue'
import Vuestore from './store.js'new Vue({el: '#app',//会自动将store对象注入到所有的子组件中// 在子组件中通过this.$store访问该store对象store:Vuestore,render: h => h(App)
})

在vue组件中使用

<template><div id="app"><h1>{{ msg }}</h1><h2>获取store仓库中的所有数据state</h2>{{$unt}}<h2>通过计算属性获取</h2>{{getCount}}<h2>通过计算属性获取是否基偶数</h2>{{isEvenOrOdd}}<h2>通过store里的getters</h2>{{$s.isEvenOrOdd}}<button type="button" @click