Vuex学习笔记

vuex是什么

vuex是为vue开发的一种状态管理模式，集中管理所有组件的状态，以相应的规则保证以一种可预测的方式发生改变。
复制代码

vuex应用场景

1、多个视图依赖于同一状态。
2、来自不同视图的行为需要变更同一状态。

Vuex的使用

安装cnpm i vuex –save

使用
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
const store  = new Vuex.Store({
    state: {

    },
    mutations: {

    },
    actions:{

    }
})
export default store
注入
const vm = new Vue({
  store,
  render: h => h(App),
}).$mount('#app')
注入store后所有的组件都会看到$store

注意要先useVuex 才能使用Vuex.store 如果在app.vue中去安装Vuex会报错，因为import导入的会默认提前执行，与顺序无关
复制代码

state

const state = {
    sum: 0,
    age: 99
    /* 
      存储数据
    */
}
访问this.$store.state
复制代码

getters

const getters = {
    bigSum(state){
        return state.sum * 10
    }
    /* 类似于Vue中的计算属性，当要有很多地方需要使用处理后的state可以应用到getters */
}
访问this.$store.getters.bigNum
复制代码

actions

const actions = {
    increment(context, params) {
        context.commit('increment', params)
        /* actions是为了处理提交的参数要异步获取和处理逻辑的地方,context是一个简化版的store 
          其中提供的dispatch处理当逻辑代码过多时，重新dispatch一下，提高代码的内聚性，提供state方便处理依赖state中的
          数据时的逻辑处理,commit 是为了提交mutations推向下一步
        */
    }

}
访问this.$store.dispatch('increment',1)
复制代码

mutations

const mutations = {
    increment(state, params) {
        state.sum += params
    }
    /* 在mutations中改变数据时,vue开发工具能很详细的追踪到,当用户行为能传递参数时且没有逻辑处理时,可以
      不用dispatch直接commit,改变后的state是数据响应式的。
    */
}
访问this.commit('increment', params)
复制代码

modules

将vuex划分为模块
const moduleA = {
    namespaced: true,
    /* 未开区命名空间，模块中的actions、mutations都会对访问做出响应，当开启命名空间后，state的访问不受影响 */
    state: () => ({
        count: 10
    }),
    mutations: {
        increment(state) {
            // 这里的 `state` 对象是模块的局部状态
            console.log('我执行了,命名空间')
            state.count++
        }
    },

    getters: {
        doubleCount(state) {
            return state.count * 2
        }
    }
}

modules: {
        a: moduleA
    }
/* 
    模块划分便于管理,模块内部会有自己的state、getters、mutations、modules、actions
*/
访问
this.$store.commit('a/increment')
this.increment()
/* 加上命名空间后actions，getters，mutations的访问形式都要加上前缀 */

 // 在使用辅助函数时要在第一个参数，加字符串要访问的模块名
//...mapMutations('a',['increment'])
...mapMutations('a',{'increment':'increment'})
复制代码

辅助函数

mapState,mapGetters,mapActions,mapMutations

    mapState是用于获取state的辅助函数,传入的配置项可分为数组和对象2种形式
    返回值是Object
    对象形式
    computed: mapState(
      {
        /* 函数形式,可用到this */
        sum(state){
          return state.sum
        },
        /* 箭头函数形式 */
        age: state => state.age
        /* 键值对形式，会被映射为age: state => state.age 注意不可以用es6简写形式 */
        age: 'age'
      }
    ) 
    数组形式mapGetters,mapActions,mapMutations和
    mapState的用法类似一般推荐用数组配置项
    //computed:mapState(['sum']),
    其中
    methods:{
        add(){
            this.$store.dispatch('increment',1)
        },
        ...mapActions(['increment']),
        ...mapMutations(['increment'])
        
        
    },
复制代码