vuex基本使用

vuex基本使用

vuex核心概念

State、Getters、Mutations、Actions、Modules

代码演示：

const store = new Vuex.Store({
    state: { // 定义全局变量
		变量名：初始值
    },
    mutations: { // "同步"修改state
        // 具体赋值给予state身上变量
        state.变量名 = 具体值
    },
    actions: { // "异步"修改state
        函数名(store,具体值){
            // 还是要交给"唯一能"修改state的mutations
            store.commit("mutations",具体值)
    },
    getters: { // vuex里计算属性
        属性名(){
            return 具体值
        }
    },
    modules: { // 分模块 (state在一个里面很臃肿)
        // 注册模块
        自定义模块名:引入模块名
    }
})

子模块文件

const submodule = {
    state: () => ({}),
    mutations:{},
    actions:{},
    getters:{},
    modules:{}
}
export default submodule

开启子模块的命名空间

防止多个modules之间，如果定义的state/mutations/actions/getters里属性重名

使用命名空间，在模板文件的根路径配置

const submodule = {
    namespaced: true,
}

注意点

• 网页刷新，vuex的变量值要回归初始化
• 分模块，会影响state的取值方式
• 分模块+开启命名空间，"还"会影响mutations/actions/getters的映射方式

组件中使用state

方法一：$store对象使用

模板中：{ $store.state.变量名 }
其它配置项中：{ this.$store.state.变量名 }

方法二：mapState映射使用

使用步骤：

1. 组件中按需导入mapState函数：import { mapState }from 'vuex'
2. 将state中数据映射为计算属性：computed:{ ...mapState(['state中属性名']) }
3. 把映射到组件内的数据当成一般计算属性使用

mutations同步修改

在vuex模式中，mutations是改变state的唯一的方式

使用步骤：

1. 定义mutations

   new Vuex.Store({
       state:{},
       mutations:{
           // 函数名可以是任意合法的函数名
           // 参数1：表示当前state
           // 参数2：可选。它表示调用函数1时，传入的参数。
           函数名(参数1,参数2){
               // 在函数内部，修改state中的数据
       }
   })
   

   说明：

   • mutations是固定写法(只有一个)
   • mutations定义完成之后，就等待被调用。它的作用是用来修改vuex中的数据

2. 组件中使用mutations

   方法一：通过$store提交mutations

   语法：this.$store.commit('mutation函数名',参数)

   mutations函数名，就是在定义Vuex.store时，设置的mutations中的方法名；

   第二个参数是可选的，它表示调用mutations时传入的额外的参数，它可以是任意数据类型。

   方法二：映射使用-不传参

   使用步骤：

   1. 从vuex中导入mapMutations的函数import { mapMutations }from 'vuex'
   2. mutations映射为methods中的函数...mapMutations(['函数名'])

   方法三：映射使用-传参

   语法：this.$store.commit('mutations中的函数名',参数)

   注意：mutations使用的两个细节

   1. 传参的个数只能是1个如果非要传多个，可以放在对象里
   2. 映射成methods时可以取别名

actions异步修改

mutations只可以进行同步操作，而常见的异步操作要放到actions中进行

1. 定义actions

   const store = new Vuex.Store({
       // ...其他代码
       actions: {
           // store类似于$store
           // payload是传过来的参数值
           // 必须在actions里提交mutations来触发state更新(规定)
           函数名(store,payload){ 
               // 加入异步任务后 -> 触发mutations -> 修改state
               setTimeout(() => {
                   store.commit('mutations函数名',payload)
               }，1000)
           }
       }
   })
   

2. 组件中使用actions

   方法一：通过$store使用action

   语法：this.$store.dispatch('actions函数名'，payload)

   方法二：通过映射的方式分发actions

   使用步骤：

   1. 从vuex中引入mapActions函数import {mapActions} from 'vuex'
   2. 将vuex中的actions方法映射为methods中的方法...mapActions(['actions函数名'])
   3. 当成普通的methods方法使用

3. 特性总结

   1. actions函数中可以包含任何异步操作
   2. actions可以提交mutations，这也是它的最终目的
   3. actions可以访问store实例
   4. 必须使用dispatch函数调用actions

getters计算属性

在vuex身上的全局状态-计算属性

1. 定义getters

getters：{ // vuex中的计算属性,当state改变,从新计算并缓存
    自定义变量名(){
        return 值
    }
    
}

2. 组件中使用getters

   方法一：通过$store使用getters

   模板语法：$store.getters.变量名

   其他配置项中：this.$store.getters.变量名

   方法二：通过映射的方式分发getters

   使用步骤：

   1. 从vuex中引入mapGetters函数import {mapGetters} from 'vuex'
   2. 将vuex中的getters计算属性映射到computed计算属性中...mapGetters(['变量名'])

modules分模块

Vuex与允许我们将store分割成模块（module）。每个模块都拥有自己的state、mutations、actions、getters，甚至是嵌套子模块。

1. 模块定义

const 自定义模块名 = {
    // 每个module都是独立的，所以这里是用函数返回对象方式
    state(){return {}},
    mutations:{},
    actions:{},
    getters:{}
}
export default 自定义模块名

2. 注册模块

   store/index.js

   const store = new Vuex.Store({
       modules: {
           自定义属性名：自定义模块名
       }
   })
   

3. 组件中使用modules下的模块

   语法：$store.state.模块名.xxx变量属性

   只有state取值用法发生改变了，其余不变