一、认识vuex

1.什么是vuex？

我们使用一条数据去管理一个视图，那么这个数据我们就称之为 ‘状态’

2.vuex是做什么的？

Vuex是一个集中式的存储管理中心，vuex中可以用来存储数据（状态）

vuex也是一个状态管理中心，它也可以进行状态的管理

3.什么是状态管理模式？

我们使用一条数据去管理一个视图，那么这种管理模式就称之为状态管理

4.什么时候使用vuex？

一般都使用在中大型应用使用

二、vuex中的五大对象

export default{
  state: {//存数据 },
  getters: {//计算属性 },
  mutations: {//同步的方法 },
  actions: {//异步的方法 },
  modules: {//分模块}
}

1.state 存储据

vuex的基本数据，用来存储变量

扫描二维码关注公众号，回复： 14645547 查看本文章

state是放置所有公共状态的属性，如果你有一个公共状态，你只需要定义在 state对象中

state: {//存数据
    n: 1,
    list: []
  },

2.getters 计算属性

从基本数据(state)派生的数据，相当于state的计算属性,具有返回值的方法:

除了state之外，有时我们还需要从state中派生出一些状态，这些状态是依赖state的，此时会用到getters（可以使用 getters 来获取 state 中的数据）自己总结：相当于是 state 的计算属性

getters: {//计算属性
  //判断仓库中的n的值是否大于10
  ifNum(state) {
    console.log(state);
    if (state.n > 0) {
      return state.n = "大于5"
     }else{
      return state.n = "不大于5"
     }
  }
},

//在组建中如何使用
computed: {
  ifNum(){
    return this.$store.getters.ifNum//获取getters对象中ifNum的计算属性
  }
},

3.mutations 同步方法

提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)

mutations: {//同步的方法
  //修改n的值为5
  numModfiy(state,payload){//state 仓库的state对象 payload参数
    state.n=payload //payload组件中所传递的参数
  }
},

//在组件中如何使用
methods: {
  numModfiy() {
    //调用仓库里的 mutations对象里的方法
    this.$store.commit("numModfiy", 10);
  },
},

4.actions 异步方法

和mutation的功能大致相同，不同之处在于

1. Action 提交的是 mutation，而不是直接变更状态。

2. Action 可以包含任意异步操作。

actions则负责进行异步操作，处理的结果交给 muations

mutations: {//同步的方法
  //修改n的值为15
  numModfiy(state,payload){//state 仓库的state对象 payload参数
    state.n=payload //payload组件中所传递的参数
  }
},
actions: {
  //使用异步的方式修改n的值为15
  asyncNumModfiy(ctx, payload){
    setTimeout(() => {
      ctx.commit("numModfiy", payload)//在调取同步的放到进行n的修改
    }, 2000)
  }
},

//在组件中如何使用
asyncNumModfiy() {
  //调用仓库里的 actions对象里的方法
  this.$store.dispatch("asyncNumModfiy", 15);
},

5.modules 模块化

模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

//主仓库
import Vue from 'vue'
import Vuex from 'vuex'
import counter from './counter'
import list from './list'
Vue.use(Vuex)
export default new Vuex.Store({
  modules: {
    counter,list
  }
})

//分仓库 store/counter/index.js
export default {
namespaced: true,//开启命名空间，防止不同模块getters，mutations，actions重名问题
  state: {//存数据},
  getters: {//计算属性},
  mutations: {//同步的方法},
  actions: {//异步的方法  },
}

//分仓库 store/ list /index.js
export default {
namespaced: true,//开启命名空间，防止不同模块getters，mutations，actions重名问题
  state: {//存数据},
  getters: {//计算属性},
  mutations: {//同步的方法},
  actions: {//异步的方法  },
}

分仓库如何在组件中使用呢？？？

//调取仓库中的方法是 方法前需要写入分仓库的路径
//例如异步方法在组件中的使场景如下 （actions 异步方法）
//在组建中如何使用
asyncNumModfiy() {//部分代码，只显示关键部分
  //调用仓库里的 actions对象里的方法
  this.$store.dispatch("list/asyncNumModfiy", 15);
},
//在方法中要挂载分仓库的路径
-------------------------------------------------
//调用分仓库的方法
{
   
   { $store.state.counter.n }}

几分钟教你搞明白vuex的五大属性及其使用方法

一、认识vuex

二、vuex中的五大对象

分仓库如何在组件中使用呢？？？

猜你喜欢