vuex数据管理的使用

vuex数据管理核心的几个状态和属性是State、Mutation、Getter、Action、Module

一、初始步骤

1.通过npm下载vuex

npm n install vuex --save

2.创建vuex文件夹和store.js文件

文件目录
3.vuex/store.js文件中引入vuex

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex)

通过这三步的操作，vuex就算引用成功了

二、State访问状态对象

1.在store.js文件中增加一个常量对象

const state={
    count:1
}

export default 封装导出代码，让外部可以可以使用

export default new Vuex.Store({
    state
})

2.访问State状态对象方式

• 通过computed的计算属性直接赋值

computed:{
  // computed的计算属性直接赋值
  count(){
      return this.$store.state.count;
  }
}

• 通过mapState的对象来赋值

computed:{
    // computed的计算属性直接赋值
    // count(){
    //  return this.$store.state.count;
    // }
    // 通过mapState的对象来赋值
    ...mapState({
      count:state=>state.count
    })
},

• 通过mapState的数组来赋值

computed:{
  ...mapState(['count'])
}

三、Mutations修改状态

• 在store.js文件中定义mutations并设置add和reduce两个修改状态的方法

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex)
// 状态对象
const state = {
    count:1
}
// 修改状态
const mutations={
    add(state){
        state.count++;
    },
    reduce(state){
        state.count--;
    }
}

export default new Vuex.Store({
    state,
    mutations
})

• 创建一个vuexdemo.vue的文件

<template>
    <div>
        vuexdemo中的数据：{{count}}
        <div>
            <button @click="addClick">点击+</button>
            <button @click="reduceClick">点击-</button>
        </div>
    </div>
</template>
<script>
import {mapState,mapMutations} from 'vuex' 
export default{
    data(){
        return{
        }
    },
    computed:{
        // computed的计算属性直接赋值
        // count(){
        //  return this.$store.state.count;
        // }
        // 通过mapState的对象来赋值
        // ...mapState({
        // count:state=>state.count
        // })
        // 通过mapState的数组来赋值
        ...mapState(['count'])
    },
    methods:{
        ...mapMutations(['add','reduce']),
        addClick(){
            // 方法一
            // this.add()
            // 方法二
            this.$store.commit('add')
        },
        reduceClick(){
            this.$store.commit('reduce')
        }
    }
}
</script>

点击修改数据

• 当我们项目庞大的时候，mutations维护起来有可能比较麻烦，可以采用新建mutations_types.js文件，将方法名定义在文件中统一管理。

export const add = 'add'  // 加
export const reduce = 'reduce'  // 减

• 使用也需要简单修改一下，在当前的store.js文件中

import * as METHOD_TYPE from './mutations_types.js'

// 修改状态
const mutations={
    [METHOD_TYPE.add](state,n){
        state.count = n;
    },
    [METHOD_TYPE.reduce](state){
        state.count--;
    }
}

四、getter 计算过滤操作

• 在store.js中加入getters

// 计算过滤操作，这里对数据进行操作
const getters = {
    count:function(state){
        return state.count +=100;
    }
}
// 在Vuex.Store()里引入 上面定义的属性
export default new Vuex.Store({
    state,
    mutations,
    getters
})

页面引入使用

import {mapState,mapMutations,mapGetters} from 'vuex' 

computed:{
  // computed的计算属性直接赋值
  // count(){
  //    return this.$store.state.count;
  // }
  // 通过mapState的对象来赋值
  // ...mapState({
  // count:state=>state.count
  // })
  // 通过mapState的数组来赋值
  ...mapState(['count']),
  ...mapGetters(["count"]) //每次操作count都会相加100
}

五、actions异步修改状态

actions和Mutations功能基本一样，不同点是，actions是异步的改变state状态，而Mutations是同步改变状态。
在store.js文件中继续写入

// 异步修改
//在actions里写了两个方法addAction和reduceAction，
//在方法体里，我们都用commit调用了Mutations里边的方法
/*
*这里用了两种方法调用
*context：上下文对象，这里你可以理解称store本身。
*{commit}：直接把commit对象传递过来，可以让方法体逻辑和代码更清晰明了。
*/
const actions ={
    addAction(context){
        context.commit('add',10)
    },
    reduceAction({commit}){
        commit('reduce')
    }
}
// 在Vuex.Store()里引入 上面定义的属性
export default new Vuex.Store({
    state,
    mutations,
    getters,
    actions
})

六、module模块组

• 随着项目的越来越大，状态管理这块就需要我们分模块来管理，分组后再进行按组编写，也为后期我们可以更好的维护。
  在/vuex/store.js中进行模块声明，同时对Vuex.Store()里面进行修写

//声明模块组
const moduleA = {
    state,
    mutations,
    getters,
    actions
}
// 在Vuex.Store()里引入 上面定义的属性
export default new Vuex.Store({
    modules:{a:moduleA}
})

• 页面使用

computed:{
    //用法一：computed的计算属性直接赋值
    // count(){
    //  return this.$store.state.a.count;
    // }
    //用法二：通过mapState的对象来赋值
    ...mapState({
    count:state=>state.a.count
    })
    //用法三：通过mapState的数组来赋值
    // ...mapState(['count']),
    // ...mapGetters(["count"]) //每次操作count都会相加100
},

—— 谨以此记录自己学习的轨迹，沉淀积累知识的笔记。——