本文共 5742 字，大约阅读时间需要 19 分钟。

vuex的基本使用

import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);//定义属性var state = {
       count:6,    country:'中国'};//定义gettersvar getters = {
       count(state){
           return state.count    },    isEvenOrOdd(state){
           return state.count%2==0?'偶数':'基数';    }}//定义mutation，处理状态（数据）的改变var mutations = {
       increment(state,payload){
             debugger           state.count = state.count + payload.data    },    incrementAsync(state,payload){
            //异步操作         var p=new Promise((resolve,reject) => {
               setTimeout(() => {
                   resolve();            },3000);        });            p.then(() => {
               state.count = state.count + payload.data        }).catch(() => {
               console.log('异步操作');        });    }}//定义actions，要执行的操作，如流程判断、异步请求等var actions = {
       // increment(context,payload){
       //     context.commit('increment',payload)    // },    increment({
   commit},payload){
           debugger        commit('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组件中使用

vuex的辅助函数的使用

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex);//定义属性（数据）var state = {
     count: 16,  todolist: [{
         id: 1,      task: '读书',      finished: true    },    {
         id: 2,      task: '写字',      finished: false    }  ]}//定义gettersvar getters = {
     getCount(state) {
       return state.count;  },  isEvenOrOdd(state) {
       return state.count % 2 == 0 ? '偶数' : '奇数';  },  getFinished(state) {
       return state.todolist.filter((item) => {
         return item.finished    })  },  getUnFinished(state) {
       return state.todolist.filter((item) => {
         return !item.finished    })  },}//定义actions，要执行的操作，如流程判断、异步请求等const actions = {
     // increment(context,payload){//包含：commit、dispatch、state  //     console.log(context);  // 	context.commit('increment',payload)  // },  increment({
       commit  }, payload) {
       commit('increment', payload)  },  decrement({
       commit,    state  }, payload) {
       if (state.count > 10) {
         commit('decrement', payload);    }  },  incrementAsync({
       commit,    state  }, payload) {
       //异步操作    var p = new Promise((resolve, reject) => {
         setTimeout(() => {
           resolve();      }, 3000);    });    p.then(() => {
         commit('increment', payload);    }).catch(() => {
         console.log('异步操作');    });  },  todosUpdate({
       commit  }, payload) {
       var p = new Promise((resolve, reject) => {
         setTimeout(() => {
           resolve();      }, 3000);    });    p.then(() => {
         commit('todosUpdate', payload);      // state.todolist.push(payload);    })  }}//定义mutations，处理状态（数据）的改变const mutations = {
     // 没有参数的情况  // increment(state){
     // 	state.count++;  // },  // 有参数的情况  increment(state, payload) {
       state.count += payload.data;  },  decrement(state, payload) {
       state.count -= payload.data;  },  todosUpdate(state, payload) {
       state.todolist.push(payload);    // 异步情况， 不方便调试     // var p=new Promise((resolve,reject) => {
       // 	setTimeout(() => {
       // 		resolve();    // 	},3000);    // });    // p.then(()=>{
       // 	state.todolist.push(payload);    // })  }}//创建store对象const store = new Vuex.Store({
     state,  getters,  actions,  mutations})//导出store对象export default store;

main.js

import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'Vue.config.productionTip = falsenew Vue({
     router,  store,  render: h => h(App)}).$mount('#app')

mapstate辅助的使用

mapgetter使用

mapmutation的使用

mapaction的使用

转载地址：https://codeboy.blog.csdn.net/article/details/107440465 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！