vuex的五个核心概念简述

1.Vuex理解

Vuex是vue.js应用设计的状态管理架构,通俗理解,可以想象就是vue组件中的data
1.state=>基本数据源

• 对应一般vue对象中的data
• state里存放数据为响应式,Vue组件从store里面读取,如果store钟数据发生改变,依赖这个数据的组件也会生更新

// 简单的state
const store = new Vuex.Store({
    state: {
        count:0
    }，
})

2.mutatios=>提交更改数据的方法(同步)

• 提交mutation是更改Vuex钟的store钟的状态唯一办法
• mutation必须是同步的,如果需要用到异步,必须要试用action
• 每个mutation都有一个字符串和一个回调函数,这个回调函数就是十几进行状态更改的地方,会接收sate作为第一个参数,提交载荷作为第二个参数,载荷在一般情况下是一个对象 ,载荷也是可以省略
  mutatios存值和取值

// 存储
// 第一个参数是vuex中对应mutation的方法,第二个值就是存入vux中的值
this.$store.commit('setTargetUser',friend);
// 取值
this.$store.state.setTargetUser

mutation小案例

//  仓库内容
state: {
        userInfo: {
            name: "",
            photo: "",
            token: ""
        },
    },
//修改数据的方法
mutations: {
	// stete是第一个参数，载荷作为第二个擦胡今昔更改
    changeUserInfo(state, user) {
        state.userInfo.name = user.name
        state.userInfo.photo = user.photo
        if (user.token) {
            state.userInfo.token = user.token
        }
    }
}
// 在vue文件中
// 存到vux里，对vuex数据进行修改
this.$store.commit('changeUserInfo',res.data.data)

3.actions=>类似一个容器,包裹mutations,让木塔同时可以异步

• actions类似于mutation
• action提交的是mutation,不是直接变更状态
  actions的存值和取值

//存储
this.$store.dispatch('setTargetUser',friend);
//取值
this.$store.getters.targetUser;

// 仓库中
// Action 类似于 mutation，不同在于：
// Action 提交的是 mutation，而不是直接变更状态。
// Action 可以包含任意异步操作。
mutations: {
    addNum(state,amount) {
      state.num +=amount
    },
    someMutation(state) {
      setTimeout(()=>{
          state.count--
      },1000)
    }
  },
  actions: {
    increment (context,args) {
           context.commit('addNum',args)
    }
  },
//另一种写法
  actions: {
    increment ({commit},args) {
            commit('addNum',args)
    }
  }
// vue页面中
methods:{
    add(){
      this.$store.dispatch('increment',this.pa.amount)
    }
  },

4.getters=>基本数据派生的数据

• getters可以对state进行计算操作,是store的计算属性
• getters可以在多组件之间重复使用
• 如果一个状态只在一个组件内使用,不可以用getters

从store的state中派生出的状态。
getters接收state作为其第一个参数，接受其他 getters 作为第二个参数，如不需要，第二个参数可以省略如下例子：
const store = new Vuex.Store({
    state: {
        count:0
    }，
    getters: {
        // 单个参数
        countDouble: function(state){
            return state.count * 2
        },
        // 两个参数
        countDoubleAndDouble: function(state, getters) {
            return getters.countDouble * 2
        }
    }
})
--------------------------------------------------------------------------------
和state一样,可以通过Vue的Computed获得Vuex的getters。
const app = new Vue({
    //..
    store,
    computed: {
        count: function(){
            return this.$store.state.count
        },
        countDouble: function(){
            return this.$store.getters.countDouble
        },
        countDoubleAndDouble: function(){
            return this.$store.getters.countDoubleAndDouble
        }
    },
    //..
})
--------------------------------------------------------------------------------
mapGetters 辅助函数
mapGetters 辅助函数仅仅是将 store 中的 getters 映射到局部计算属性，与state类似
import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getters 混入 computed 对象中
    ...mapGetters([
      'countDouble',
      'CountDoubleAndDouble',
      //..
    ])
  }
}
--------------------------------------------------------------------------------
如果你想将一个 getter 属性另取一个名字，使用对象形式：
mapGetters({
  // 映射 this.double 为 store.getters.countDouble
  double: 'countDouble'
})

5.modules=>模块化vuex

• Vuex 允许我们将 store 分割到模块（module）。每个模块拥有自己的 state、mutation、action、getters、甚至是嵌套子模块——从上至下进行类似的分割