store辅助函数全面讲解

1.下载依赖

cnpm install vuex --save

2.定义一个store文件夹，在改文件夹下定义一个index.js文件

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        creditCity: '',                                               // 等待状态
    },
    mutations: {
        "SET_CITY": function (state, city) {
            state.creditCity = city;
        },
    },
    getters: {
        "GET_CITY": function (state) {
            return state.creditCity
        }
    },
    actions: {
        "SET_CITY": function ({commit}, city) {
            console.log('公共状态',city);
            commit("SET_CITY", city)
        },
    }
});
export default store

 

4.在main.js中引入

import store from './store/'
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

5.使用home.vue

//引入Vuex辅助函数,状态和方法
//属性
import { mapState } from 'vuex'
//异步动作
import {mapActions} from 'vuex'

methods:{
    //Vuex辅助函数，将公共状态中的方法映射成当前的this方法
        ...mapActions(['SET_CITY']),
}
computed: {
  //Vuex辅助函数，将公共状态中的属性映射成当前的computed中
  ...mapState(['creditCity']),
}
mounted(){
    //调用公共状态中的异步方法
    this.SET_CITY('上海');
    //获取公共状态中的属性
    console.log(this.creditCity);
}