vue15-优快云博客

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用vue插件
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配置项

//引入vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入插件
import VueResource from 'vue-resource'
//引入store
import store from './store'
//关闭vue生产提示
Vue.config.productionTip = false
//使用插件
Vue.use(VueResource)

//创建vm
new Vue({
   el:'#app',
   render:h=>h(App),
   store,
   beforeCreate() {
    Vue.prototype.$bus=this//安装全局事件总线
   },
})

4.基本使用

(1)初始化数据、配置action、配置mutation、操作文件store.js

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用vue插件
Vue.use(Vuex)

//准备actions—用于响应组件中的动作
const actions = {
    /*jia(context, value) {
        context.commit('JIA', value)
    },
    jian(context, value) {
        context.commit('JIAN', value)
    },*/
    jiaOdd(context, value) {
        if(context.state.sum%2){
            context.commit('JIA', value)
        }        
    },
    jianWait(context, value) {
        setTimeout(()=>{
            context.commit('JIAN', value)
        },500)        
    },
}
//准备mutations—用于操作数据（state)
const mutations = {
    JIA(state, value) {
        state.sum += value
    },
    JIAN(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('action中的方法名'，数据)或$store.commit('mutation中的方法'，数据)

备注：若没有网络请求或其他业务，组件可以越过action，即不写dispatch，直接编写commit

5.getters的使用

概念:当state中的数据需要经过加工后再使用时，可以使用getters加工。

在store.js中追加getters配置

const getters = {
bigSum(state){
return state.sum *10
}
//创建并暴露store
export default new vuex.Store({
getters)}

组件中读取数据: $store.getters.bigsum

6.四个map方法的使用

1.mapState方法:用于帮助我们映射state中的数据为计算属性

computed: {
//借助mapState生成计算属性:sum、 school、subject（对象写法)
...mapState({sum : 'sum' ,school : 'school ' ,subject: ' subject' })，
//借助mapState生成计算属性: sum、school、subject（数组写法)
...mapState( [ 'sum ' , 'school' , 'subject'])，
},

2.mapGetters方法:用于帮助我们映射getters 中的数据为计算属性

computed: {
//借助mapGetters生成计算属性: bigSum（对象写法)
...mapGetters({bigSum: 'bigSum '}),
//借助mapGetters生成计算属性: bigSum(数组写法)
...mapGetters([ 'bigSum' ])

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

methods:{
//靠mapActions生成: increment0dd、incrementWait（对象形式)
...mapActions({incrementOdd: 'jia0dd ' ,incrementwait : 'jialwait ' })
//靠mapActions生成: incrementOdd、 incrementWait（数组形式)
...mapActions( [ 'jiaOdd ' ,'jiawait '])

4.mapMutations方法:用于帮助我们生成与mutations对话的方法，即:包含($store.commit(xx)的函数

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

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

7.模块化+命名空间

1.目的:让代码更好维护，让多种数据分类更加明确。

2.修改store.js

const countAbout = {
namespaced:true,
//开启命名空间
state:{x:1},
mutations: { ... },
actions: { ... },
getters: {
bigSum(state){
return state.sum* 10}
   }
}
const personAbout = {
namespaced:true,
//开启命名空间
state:{ ... },
mutations: { ... },
actions: {... }
const store = new Vuex.Store({
modules:{
countAbout,personAbout
  }
})

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

//方式一:自己直接读取
this.$store.state.personAbout. list
//方式二:借助mapState读取;
...mapState( 'countAbout' ,[ ' sum ' ,'school ' , 'subject'])，

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

//方式一:自己直接读取
this.$store.getters [ 'personAbout/firstPersonName ']
//方式二:借助mapGetters读取:
. ..mapGetters ( 'countAbout'[ 'bigSum'])

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

//方式一:自己直接dispatch
this.$store.dispatch( ' personAbout/addPersonWang ' ,person)
//方式二:借助mapActions:
...mapActions( 'countAbout ' ,{incrementOdd : 'jiaOdd ' ,incrementwait: 'jiawait '})

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

//方式一:自己直接commit
this.$store.commit( " personAbout/ADD_PERSON ' ,person)
//方式二:借助mapMutations:
...mapMutations( ' countAbout ' ,{increment: ' JIA' ,decrement : 'JIAN'})，