vuex基础

何谓 Vuex?

根据 Vuex 文档中的描述，Vuex 是适用于 Vue.js 应用的状态管理库，为应用中的所有组件提供集中式的状态存储与操作，保证了所有状态以可预测的方式进行修改。

Vuex 中 Store 的模板化定义如下：

 
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
  },
  actions: {
  },
  mutations: {
  },
  getters: {
  },  
  modules: {
    
  }
})
export default store

上述代码中包含了定义 Vuex Store 时关键的 5 个属性：

• state: state 定义了应用状态的数据结构，同样可以在这里设置默认的初始状态。

 state: {
  projects: [],
  userProfile: {}
}

• mutations: 调用 mutations 是唯一允许更新应用状态的地方。

 mutations: {
    SET_PROJECT_LIST: (state, { list }) => {
      state.projects = list
    }
  }

 actions介绍

定义异步，延迟的方法

actions:{
    getCartNum(context,data){
        setTimeout(()=>{
            //可以调用mutations方法
            context.commit("SET_CART_NUM",data)
        },4000)
    }
}

 在组件中调用

$store.dispatch("getCzrtNum",33)

 2.基础使用步骤

1.导入vuex

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

2.创建store对象

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})
 

4.把store对象挂载到vue实例中

new Vue({
    el:"#app",
    render:h=>h(app),
    router,
    store
})

  备注 我们创建一个练习项目文件夹，注意配置的时候选择安装vuex即可，它会自动生成store文件夹,里面的index.js就是存储的核心文件。

3.state设置共享数据

组件中使用共享数据的语法：

// 定义数据使用state
    state: {
        // 定义vuex中的数据
        cartNum: 10,
    },

 

4.mutations定义修改数据方法 

组件要修改数据建议用mutations

vuex中不建议子组件直接修改全局的store中的共享数据，所以我们要是想修改数据的时候建议使用mutations，便于统一管理。

mutations中定义处理逻辑的方法

mutations: {
        // 修改state数据必须在mutations中的方法
        // 方法名建议大写
        SET_CART_NUM(state,data){
            // 修改cartNum的值
            state.cartNum = data;
        }
    },

 组件中通过methods中的方法调用mutations中的方法

$stote.commit("SET_CART_NUM",100)

3.单词介绍

单词	解释
actions	动作：异步方法
mutations	改变：是修改state数据的唯一方式
state	状态，数据
getters	获取器
moudule	模块
commit	提交