vux基本使用

vuex的基本使用

1. 什么是状态？

• 用一条数据去管理一个视图或是视图中的一部分，那么我们就将这个数据称之为状态

2. 什么是状态管理？

• 用一条数据去管理一个视图或是视图中的一部分，那么我们就将这个数据称之为状态，这种管理的形式我们称之为 状态管理

3. vuex是做什么的？（概念）

• vuex是一个集中式的存储仓库【状态】，类似于 本地存储、数据库，vuex是vue的状态管理工具，它的功能主要是实现多组件间的状态【数据】共享

4. vuex的组成部分

• state 状态
• action 动作（业务交互）
• mutation 修改state
• getter 获取数据的
• store state的存储者

8. vuex的使用方案有哪些？（state修改前，state修改后）

没有使用dispatch发送数据而是直接通过commit方法和mutations取得联系就是前非标准，通过dispatch发送的就是后标准

没有通过getters过去数据就是后非标准，通过getters获取数据就是后标准

1. 前标准，后标准 //通过dispatch给action发送请求，然后通过getter获得到数据

2. 前标准，后非标准 //通过dispatch给action发送请求，然后通过mutation的dtate获得数据

3. 前非标准，后标准 //通过commit直接跟mutation联系，然后通过getter获得到数据

4. 前非标准，后非标准 // 通过commit直接跟mutation联系，然后通过mutation的dtate获得数据

5. 但是这样数据的获取写的太长了，冗余

6. 视图和vuex的交互代码太长了，冗余

• 所以 Vuex提供了4个辅助工具： mapState mapGetters mapActions mapMutaions
• mapState 我们可能不常用
• mapGetters([gettersFnName]) 使用 {{ gettersFnName }} 标准

new Vue({
    //computed: mapGetters(['getCount']), // 这么写我们的当前组件的自定义计算属性就没有地方放了
    computed: {
        ...mapGetters(['getCount]) //后标准
    }
})

• mapActions([actionsFnName]) 标准

new Vue({
    methods: {
        ...mapActions([actionsFnName])//前标准
    }
})

• mapMutations([mutationsFnName]) 非标准

<button @click = "mutationsFnName()"></button>

new Vue({
    methods: {
         ...mapMutations([mutationsFnName])
    }
})

• 以上讲的都是用户交互，没有写数据交互
• vuex 的数据交互
• 注意：
• vuex的数据交互写在actions里面
• actions.js

const actions = {
    getDataInfo ( { commit } ) {
        fetch('/data.json')
        .then( res => res.json() )
        .then( data => {
        //获取到数据之后进行动作的创建和发送
        let action = {
            type: 'GETDATAINFO',
                payload: data//将获取到的数据赋值给payload，然后发送给mutations，再赋值states
            }
                commit( action )
            })
            .catch( error => console.log( error ))
        }
}
export default actions

vuex 中的 modules

• store目录中放的是目录

<!-- 目录结构 -->
store//总目录
    index.js//总目录的index
    home//文件夹名称
        state.js
        actions.js
        mutations.js
        getters.js
        type.js
        index.js
    shopcar
        state.js
        actions.js
        mutations.js
        getters.js
        type.js
        index.js
    list
        state.js
        actions.js
        mutations.js
        getters.js
        type.js
        index.js
    user
        state.js
        actions.js
        mutations.js
        getters.js
        type.js
        index.js
// home 下的 index.js
import state from './state'
import actions from './actions'
import mutations from './mutations'
import getters from './getters'
const homeModule = {
    state,
    actions,
    mutations,
    getters
}
export default homeModule
// store 下的 index.js
const store = new Vuex.Store({
modules: {
//key: value // key就是目录名称， value就是目录下的index.js导出的模块
    home: homeModule
}
})
export default store

actions代码

    
import * as type from './types'
/**increment是一个方法，有两个参数，app.vue中会使用这个方法；这个方法将会发送到mutations页面
*
* increment的第一个参数是一个对象，里面规定是commit，这是一个方法，要在下面使用，发送这个对象到mutations页面，对象里面有两个参数，我们可以在这个方法中定义这个对象，然后发送出去
* 这个对象的第一个参数是type，值是mutations页面的方法名
* 这个对象的第二个参数是payload，值是app.vue中传过来的值
*
* increment的第二个参数是app.vue中传过来的
*/
const actions = {
    increment ({commit},value) {//两个参数，key'是主页面通过dispatch发送过来的
        // console.log('value',value)
        let obj = {//这是commit的参数，是一个对象，有俩个参数
            type : type.INCREMENT,//要求是一个常量，
            payload : value
        }
        commit(obj)//发送这个对象到mutations页面，只能通过commit发送
    },
    yibai ({commit},value) {
        let bai = {
            type: type.YIBAI,
            payload : value
        }
        commit(bai)
    }
}
export default actions//导出模块

getters页面

const Getters = {
    addcount (state) {写一个方法，参数就是state，可以获取到里面的值
        return state.count、、把值returned出去
        console.log('state',state)
    }
}
export default Getters

mutations页面

    
import * as type from './types';//接收./type中所有的参数，使用type.的方式使用
const mutations = {
    [type.INCREMENT] (state,action) {//[type.INCREMENT]是types页面的常量，直接正常导入这个数据然后直接把这个当方法名也可以，但是由于大写的方法名书写不方便，所以我们使用[ ]的方式来写，这样才能访问到types的东西，直接type.INCREMENT是获取不到的
    console.log('state',state)//第一个参数是state页面的数据
    console.log('action',action)//第二个参数是actions中commit对象发送过来的那个数据
    state.count++//这里可以操作state页面的数据改变
},
[type.YIBAI] (sta,ac) {
    console.log(sta)
    console.log(ac)
    sta.a=sta.a+10
    }
}
export default mutations

state 页面

const state = {//定义数据，每一个key就是一个数据
    count : 0,
    a:100
}
export default state

types页面

export const INCREMENT = 'INCREMENT'
export const YIBAI = 'YIBAI'

index页面

import Vue from 'vue';
import vuex from 'vuex';//下载并引入vuex

//引入这些文件
import getters from './getters';
import actions from './actions';
import mutations from './mutations';
import state from './state'

Vue.use(vuex);//使用vuex
const store = new vuex.Store({//实例化vuex，然后要导出这个store
    state,
    actions,
    mutations,
    getters,
    // modules
})
export default store//导出store