vuex使用，vuex知识点

import Vue from 'vue'
import Vuex from 'vuex'
​
// 安装插件vue的底层会执行Vue.install
Vue.use(Vuex)
​
// 创建对象
const store = new Vuex.Store({
  state:{
    counter: 1000
  },
  mutations:{
    increment(state){
      state.counter++
    },
    decrement(state){
      state.counter--
    },
  },
  actions:{},
  getters:{},
  modules:{}
})
​
// 导出store对象
export default store
​
// 1.提取出一个公共的store对象，用于保存在多个组件中共享的状态
// 2.将store对象放置在new Vue对象中，这样可以保证在所有的组件中都可以使用到
// 3.在其他组件中使用store对象中保存的状态即可
//   ①通过this.$store.state属性的方式来访问状态
//   ②通过this.$store.commit('mutations中的方法')来修改状态

1、getters基本使用：

        类似于computed计算属性，getters默认不能传递参数，若希望传递参数，那么只能让getters本身返回另一个函数。

2、mutation状态更新：

        Vuex的store状态的更新唯一方式：提交Mutation。

        Mutation主要包括两个部分：

                ①字符串的事件类型(type)；

                ②一个回调函数(handler)，该回调函数的第一个参数就是state 在通过mutations更新数据的时候，有可能我们希望携带一些额外的参数，参数被称为nutations的载荷(payload)。

3、Mutation响应规则：

        1）提前在store中初始化好所需的属性；

        2）当给state中的对象添加新属性时，使用下面的方式：

                ①方式一：使用Vue.set(obj,'newProp',123)；

                ②方式二：用新对象给旧对象重新赋值 3.删除state中的对象Vue.delete(对象，属性)。

4、Actions：

        类似于Mutation，但是是用来代替Mutation进行异步操作的 其中context是和store对象具有相同方法和属性的对象，可以通过context去进行commit相关的操作，也可以获取context.state等。

        在Vue组件中，如果我们调用action中的方法，那么就需要使用dispatch，同样也是支持传递payload。

5、Modules：

        Vuex允许我们将store分割成模块，每个模块拥有自己的state、mutation、action、getters等。

const moduleA={
    state:{
        name:'朱依琳'
    },
    // 修改state
    mutations:{
        update(state,payload){
            state.name=state.name+payload.message
        }
    },
    getters:{},
    actions:{},
}

const moduleB={
    state:{
        name:'依琳'
    },
    mutations:{},
    getters:{},
    actions:{},
}

6、模块化开发，减少store的臃肿

        modules:{

                a:moduleA,

                b:moduleB

        }

<template>
    <div>
        <p>{{$store.state.a.name}}</p>
        <p>{{$store.state.b.name}}</p>
        <button @click='updateA'>修改模块A中的name属性</button>
    </div>
</template>
<script>
    export default{
        name:'module',
        methods:{
            updateA(){
                this.$store.commit('updateA',{message:'i'})
            }
        }
    }
</script>

7、vuex模块化开发笔记：

①main.js

import store from './vuex_studay_module/store'
new VUe({
    router,
    store,
    render:h=>h(App)
}).$mount('#app')

②store.js

        该文件是主要暴露vuex实例的文件，最终被引用到main.js。

import Vue from 'vue'
import Vues from 'vuex'

Vue.use(Vuex)

import actions from './actions'
import getters from './getters'
import mutations from './mutations'

import moduleA from './modules/modulesA'
import moduleB from './modules/modulesB'

export default new Vuex.Store({
    state:{
        test:1,
        a:2
    },
    getters,
    mutations,
    actions,
    modules:{
        moduleA,
        moduleB
    }
})

③module文件夹

        1）模块A

import type from '../type'
const state={
    total:20
}
const getters={
    getA(state){
        return state.total
    }
}
const actions={
    add({commit,state}){
        state.total++
        commit(type.TEST_MUTATIONS)
    }
}
const mutations={
    des(state){
        state.total--
    },
    [type.TEST_MUTATIONS](state){
        console.log(state);
    }
}
export default{
    namespaced:true,
    state,
    getters,
    actions,
    mutations
}

        2）模块B

const state={
    total:30
}
const getters={
    getA(state){
        return state.total
    }
}
const actions={
    add({commit,state}){
        state.total++
    }
}
const mutations={
    des(state){
        state.total--
    }
}
export default{
    namespaced:true,
    state,
    getters,
    actions,
    mutations
}

        namespaced:true【如果两个模块有同名的方法或数据就可以用模块名来区分，每个模块文件单独写自己的state,getters,actions,mutations，最后export出来】

vuex文件写完后最后就是使用了：

<template>
    <div>
        {{aaa}}{{aaaa}}<br>
        {{aaa}}{{aaaa}}<br>
        <div @click='addB'>增加</div>
        <div @click='addA'>减少</div>
    </div>
</template>
<script>
import {mapState,mapGetters,mapActions,mapMutations}from 'vuex'
export default{
    name:'vuexModule',
    data(){
        return{}
    },
    mounted(){},
    computed:{
        ...mapState({
            aaa:state=>state.moduleA.total,
            bbb:state=>state.moduleB.total
        }),
        ...mapGetters({
            aaaa:'moduleA/getA',
            bbbb:'moduleB/getA'
        })
    },
    methods:{
        ...mapActions({
            addA:'moduleA/add',
            addB:'moduleB/add'
        })
        ...mapMutations({
            desA:'moduleA/des',
            desB:'moduleB/des'
        })
    }
}
</script>

        【从vuex中引入mapState,mapGetters,mapActions,mapMutations对应的映射出模块中的数据和方法，设置了namespaced:true后通过moduleA/des来引用对应模块的数据】

        type： type文件定义的是mutations函数名的常量一般使用大写来区分表示，这个主要使用在多人协同开发让方法名更加直观

const TEST_MUTATIONS = 'TEST_MUTATIONS'
export default{
    TEST_MUTATIONS
}

        例如模块A:

import type from '../type'
const mutations={
    des(state){
        state.total--
    },
    [type.TEST_MUTATIONS](state){
        console.log(state)
    }
}