Vuex

搭建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'
.......
new Vue({
    el:'#app',
    render: h => h(App),
    store
})

基本使用

1. 初始化数据、配置actions、mutations，操作文件store.js

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

// actions对象——响应组件中用户的动作
const actions = {
    // 响应组件中加的动作
    plus(context,value){ // context相当于一个miniStore
        context.commit('PLUS',value)
    }
}
// mutations对象——修改state中的数据
const mutations = {
    // 执行动作
    PLUS(state,value){
        state.sum += value
    }
}
// state对象——存放具体数据
const state = {
    sum:0
}

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

2. 组件中读取vuex中的数据：$store.state.sum
3. 组件中修改vuex中的数据：$store.dispatch('actions中的方法名',数据)或$store.commit('mutations中的方法名',数据)；若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写commit。
4. 当state中的数据需要经过加工后再使用时，可以使用getters加工。

......
const getters = {
    xxx(state){
        return state.sum * 10
    }
}
// 创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})

组件中读取数据：$store.getters.xxx

map方法的使用

1. mapState用于映射state中的数据为计算属性

computed: {
    // 借助mapState生成计算属性（对象写法）,第一个sum为生成计算属性的方法名，第二个sum是state中的数据
    ...mapState({sum:'sum',sum1:'sum1'}),
    // （数组写法），当生成计算属性名和state中的数据名一致时可采用
    ...mapState(['sum','sum1'])
}

2. mapGetters用于映射getters中的数据为计算属性

computed: {
    // 借助mapGetters生成计算属性（对象写法）
    ...mapGetter({xxx:'xxx'}),
    // （数组写法），当生成计算属性名和state中的数据名一致时可采用
    ...mapState(['xxx'])
}

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

methods: {
    // 对象形式
    ...mapActions({increment:'plus'})
    // 数组形式
    ...mapActions(['plus'])
}

4. mapMutations用于生成与mutations对话的方法，即：包含$store.commit(xxx)的函数

methods: {
    // 对象形式
    ...mapMutations({increment:'PLUS'})
    // 数组形式
    ...mapMutations(['PLUS'])
}

mapActions和mapMutations使用时，若需要传递参数，在模板中绑定事件时传递好参数，否则参数默认为事件对象event

模块化+命名空间

1.修改store.js

const moduleA = {
    namespaced: true,
    state:{},
    mutations:{},
    actions:{},
    getters:{}
}

const moduleB = {
    namespaced: true,
    state:{},
    mutations:{},
    actions:{},
    getters:{}
}

const store = new Vuex.Store({
    modules:{
        moduleA,
        moduleB
    }
})

2. 开启命名空间后，组件中读取state数据

// 自己直接读取
this.$store.state.moduleA.xxx
// 借助mapState读取
...mapState('moduleA',['xxx'])

3. 开启命名空间后，组件中读取getters数据

// 自己直接读取getters中的moduleA/xxx
this.$store.getters['moduleA/xxx']
// 借助mapState读取
...mapGetters('moduleA',['xxx'])

4. 开启命名空间后，组件中调用dispatch

// 直接调用
this.$store.dispatch('moduleA/xxx',value)
// 借助mapActions
...mapActions('moduleA',{xxx:'xxx'})

4. 开启命名空间后，组件中调用commit

// 直接调用
this.$store.commit('moduleA/xxx',value)
// 借助mapMutations
...mapMutations('moduleA',{xxx:'xxx'})