vuex的配置与使用

1.创建文件：src/store/index.js

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)


//准备actions对象——响应组件中用户的动作
const actions = {}
//准备mutations对象——修改state中的数据
const mutations= {}
//准备state对象——保存具体的数据
const state= {}


//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state
})

2.在main.js中创建vm时传入store配置项

......
//引入store
import store from './store'
......


//创建vm
new Vue（{
    el:'#app',
    render:h => h(App),
    store
    }）

3.基本使用

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//引用Vuex
Vue.use(VUex)

const actions = {
    //响应组件中加的动作
    jia(context,value){
        //console.log('actions中的jia被调用了'，miniStore，value)
         context.commit('JIA',value)
        },
    }

const mutations = {
    //执行加
    JIA(state,value){
        //console.log('mutations中JIA被调用了'，state，value)
    }
    }

//初始化数据
const state = {
    sum:0
    }
//准备getters————用于将state中的数据进行加工
const getters = {
    bigSUm(state){
        return state.sum*10
    }
    }
//创建并暴露store
export dafault new Vuex.StoreI({
     actions,
     mutations,
     state,
     getters
    })

4.组件中读取vuex中的数据：$store.state.sum   js中加this

5.组件中修改vuex中的数据：$store.dispatch('action中的方法名'，数据)或$store.commit('mutations中的方法名'，数据)

6.mapState

import {mapState,mapGetters} from 'vuex'
//靠程序员自己亲自去写计算属性
computed:{
sum(){
    return this.$store.state.sum
}    
}

//mapState方法：用于帮助我们映射state中的数据为计算属性
computed:{
//借助mapState生成计算属性，sum（对象写法）
    ...mapState({sum:'sum'})
}
//借助mapState生成计算属性，sum（数组写法）
    ...mapState(['sum'])

7.mapGetters

import {mapState,mapGetters} from 'vuex'
//靠程序员自己亲自去写计算属性
computed:{
bigSum(){
    return this.$store.getters.bigsum
}    
}

//mapGetters方法：用于帮助我们映射getters中的数据为计算属性
computed:{
    //借助mapGetters生成计算属性：bigSum（对象写法）
    ...mapGetters({bigSum:'bigSum'})
    //借助mapGetters生成计算属性，bigSum(数组写法)
    ...mapGetters(['bigSum'])
}

8.mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数

methods:{
    //靠mapActions生成，incrementOdd,incrementWait(对象形式)
    ...mapActions({inctementOdd:'jiaOdd',incrementWait:'jiaWait'})
    //靠mapActions生成，incrementOdd,incrementWait(数组形式)
    ...mapActions(['jiaOdd','jiaWait'])
    }

9.mapMutations方法：用于帮助我们生成与Mutations对话的方法，即：包含$store.dispatch(xxx)的函数

methods:{
    //靠mapActions生成，increment，decrement（对象形式）
    ...mapMutations({increment:'JIA',decrement:'JIAN'})
    //靠mapMutations生成，JIA，JIAN（数组形式）
    ...mapMutations(['JIA','JIAN'])
    }

备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。