vuex的基础使用方法

安装Vuex：使用npm或yarn命令安装Vuex库。

                   

  npm install vuex

 创建一个Vuex store：在你的项目中创建一个store.js文件，用于初始化和配置Vuex store。

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    // 初始化的状态
    count: 0
  },
  mutations: {
    // 定义处理状态变化的方法
    increment(state) {
      state.count++
    },
// 定义处理状态变化的方法
    // increment(state, num) {
    //   console.log(num);
    //   state.count = num
    // },
    decrement(state) {
      state.count--
    }
  },
  actions: {
    // 定义异步操作的方法
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
    // // 定义异步操作的方法
    // incrementAsync({ commit }, data) {
    //   setTimeout(() => {
    //     commit('increment', data)
    //   }, 1000)
    // }
  },
  getters: {
    // 定义计算属性
    doubleCount(state) {
      return state.count * 2
    }
  }
})

export default store

在根组件中引入store：在你的Vue根组件中引入并使用Vuex store。 

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

new Vue({
  render: h => h(App),
  store
}).$mount('#app')

组件中使用store中的数据和方法：在需要使用store中数据和方法的组件中，使用Vue mapState、mapMutations、mapActions和mapGetters来映射store中的数据和方法到组件的计算属性和方法。 

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'

export default {
  computed: {
    ...mapState(['count']),
    ...mapGetters(['doubleCount'])
  },
  methods: {
    ...mapMutations(['increment', 'decrement']),
    ...mapActions(['incrementAsync'])
  }
// methods: {
  //   ...mapMutations(['increment', 'decrement']),
  //   ...mapActions(['incrementAsync']),
  //   getMutation(){
  //     console.log(this);
  //     this.$store.commit('increment',"我是mutations传递的参数")
      // this.increment("我是mutations传递的参数")
  //   },
  //   getAction(){
  //     this.$store.dispatch('incrementAsync',"我是actions传递的参数")
      // this.incrementAsync("我是actions传递的参数")
  //   }
  // }
}
</script>

使用命名空间 

computered
...mapMutations('模块名', ['xxx']), 
  ...mapMutations('模块名',{'新名字': 'xxx'})//起别名

methods
...mapMutations('home', ["increment"]),//方便使用mutations(同步)
    ...mapActions('home', ['incrementAction'])//方便使用actions(异步)

const homeModule = {
    namespaced: true, // 指定命名空间 =>局部
    state() {
        return {
            homeCounter: 100
        }
    },
    getters: {
        doubleHomeCounter(state, getters, rootState, rootGetters) {
            return state.homeCounter * 2
        },
    },
    mutations: {
        increment(state) {
            state.homeCounter++
        }
    },
    actions: {
        incrementAction({ commit, dispatch, state, rootState, getters, rootGetters }) {
            commit("increment")
        }
    }
}
export default homeModule

//将home.js引入到index.js里面

import home from './modules/home'

import { createStore } from 'vuex';
 
 export default  new Vuex.Store({
    state: {
        num: 10,
    },
    getters: {
    },
    mutations: {
        setNum(state, payload) {
            console.log('根模块的setNum被调用');
            state.num += payload;
        },
    },
    actions: {
    },
modules: {
    home,
  }
});