关于vue.js:Vuex3x学习

4次阅读

共计 10466 个字符，预计需要花费 27 分钟才能阅读完成。

Vuex 是 Vue 官网推出的一个状态管理工具，其能生成一个独自的全局状态实例，其有以下特点：

可能在 vuex 中集中管理共享的数据，利于开发和前期的保护
可能在 Vue 的各个组件中实现拜访和共享，可能无效解决以下兄弟组件、祖孙组件等跨代组件的通信艰难问题。
存储在 vuex 中的数据都是响应式的，可能实时保持数据与页面的同步。

//CDN 
https://unpkg.com/vuex@3.6.2 
//NPM
npm i vuex@ 3.6.2 -s

注意事项 ：版本号在 3.6.2 以下的 vuex 实用于 vue2，若在 vue2 的工程项目中间接npm i vuex -s 会报如下的谬误

解决办法是指定版本号，目前 vue2 应用的版本目前最高反对到 3.6.2，具体可在更新记录中进行查阅。

3.1 `State`

State 绝对于 vuex 来说就好比 vue 组件中的 data，所以申明 state 必须是 纯正的对象 (含有零个或多个的 key/value 对)，在建设后，State 数据会被转换为响应式的数据。

3.1.1 `State`的拜访有以下的三种模式

在 vue 组件中 (tempalte、data、methods、申明周期函数等) 中拜访
在 vuex 中拜访
在其余 js 文件中拜访

首先定义一个 store，外面只蕴含 State，而后咱们将其注入到全局，上面一次进行以上三种模式的测试

//store.js
import Vue from "vue";
import Vuex from "vuex"
Vue.use(Vuex)

const store = new Vuex.Store({
    state: {userName: "Vuex 的学习之旅"}
})

export default store

//main.js
import Vue from 'vue'
import App from './App.vue'
import store from "./store"

Vue.config.productionTip = false

new Vue({render: h => h(App),
  store
}).$mount('#app')

//App.vue
<template>
  <div id="app">
    <test-component></test-component>
  </div>
</template>

<script>
import TestComponent from "./components/test-component.vue"
export default {
  name: "app",
  components: {TestComponent}
}
</script>

1. 在 vue 组件中拜访

<template>间接在模板中应用 $store.state... 进行 store 中 state 数据的拜访

<script>通过 this.$store.state... 进行 store 中 state 数据的拜访

//test-component
<template>
  <div id="app">
      <div> 姓名:{{$store.state.userName}}</div>
  </div>
</template>

<script>
export default {
  name: 'test',
  data() {
      return {username: this.$store.state.userName}
  },
  created() {console.log(this.$store.state.userName);
      console.log(this.username);
  }
}
</script>

注: 因为不能批改 store 数据，所以个别不倡议在 data 中拜访 store 的数据，因为它没有缓存成果，个别在计算属性中获取 state 数据。

//test-component
<template>
  <div id="app">
      <div> 姓名:{{compute_username}}</div>
      <div>{{compute_age}}</div>
      <div>{{compute_sex}}</div>
  </div>
</template>

<script>
export default {
  name: 'test',
  data() {
      return {description: "性别是"}
  },
  computed: {compute_username() {return this.$store.state.userName},
      compute_age() {return "年龄" + this.$store.state.age},
      compute_sex() {return this.description + this.$store.state.sex}
  }
}
</script>

在 vuex 中拜访
如果 vuex 中拜访 state 的数据，个别是在 mutation、getters 中能够通过 this.state... 进行获取

//store.js
import Vue from "vue";
import Vuex from "vuex"
Vue.use(Vuex)

const store = new Vuex.Store({
 state: {userName: "Vuex 的学习之旅"},
 mutations: {set_userName(state, data) {
         this.state.userName = data
         // 等同于 state.userName = data
     }
 }
})
export default store

//test-component
<template>
 <div id="app">
     <div> 姓名:{{$store.state.userName}}</div>
 </div>
</template>

<script>
export default {
 name: 'test',
 data() {
     return {username: this.$store.state.userName}
 },
 created() {this.$store.commit("set_userName", "批改了 vuex 的名字")
 }
}
</script>

在其余 js 文件中拜访
在其它 js 文件中拜访就须要后行引入 store.js，而后对这个 store.js 文件导出的对象进行取值等操作。
```
// other.js
import store from "./store"
console.log(store.state.userName);
```

3.1.2 `mapState`语法糖

mapState 语法糖的次要作用是将 store 中的 state 映射到以后 vue 实例的 computed 中

在没有 mapState 时，咱们获取 state 个别在 computed 中进行获取，对于获取多个 state 数据，那么咱们就要写多个 computed 办法，如下

//store.js
import Vue from "vue";
import Vuex from "vuex"
Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        userName: "Vuex 的学习之旅",
        age: 18,
        sex: "男"
    }
})
export default store

//test-component
<template>
    <div id="app">
        <div> 姓名:{{compute_username}}</div>
        <div>{{compute_age}}</div>
        <div>{{compute_sex}}</div>
    </div>
</template>

<script>
export default {
    name: 'test',
    data() {
        return {description: "性别是"}
    },
    computed: {compute_username() {return this.$store.state.userName},
        compute_age() {return "年龄" + this.$store.state.age},
        compute_sex() {return this.description + this.$store.state.sex}
    }
}
</script>

针对于写多个 computed 的繁琐和冗余，应用 mapState 能够帮忙咱们生成 计算属性。

3.1.2.1 `mapState`对象写法

//test-component
<template>
    <div id="app">
        <div> 姓名:{{compute_username}}</div>
        <div>{{compute_age}}</div>
        <div>{{compute_sex}}</div>
    </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
    name: 'test',
    data() {
        return {description: "性别是"}
    },
    computed: mapState({compute_username(state) {
            return state.userName
            // 等同于 return this.$store.state.userName
        },
        //ES6 箭头函数
        //compute_username:state => state.userName
        //compute_username:state => this.$store.state.userName


        // 传字符串参数 'age' 等同于 `state => state.age`
        compute_age: 'age',

        // 须要配合组件实例中的其它数据, 应用一般函数的模式, 能力保障 this 的指向
        compute_sex(state) {return this.description + state.sex}
    })
}
</script>

3.1.2.1 `mapState`数组写法

当映射的计算属性的名称与 state 的数据名称雷同时，咱们也能够给 mapState 传一个字符串数组。

<template>
    <div id="app">
        <div> 姓名:{{userName}}</div>
        <div>{{age}}</div>
        <div>{{sex}}</div>
    </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
    name: 'test',
    data() {
        return {description: "性别是"}
    },
    computed: {userName() {return this.$store.state.userName},
        age() {return this.$store.state.age},
        sex() {return this.$store.state.sex}
    }
}
</script>

<template>
    <div id="app">
        <div> 姓名:{{userName}}</div>
        <div>{{age}}</div>
        <div>{{sex}}</div>
    </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
    name: 'test',
    data() {
        return {description: "性别是"}
    },
    computed: mapState(["userName", "age", "sex"])
}
</script>

3.1.2.2 `mapState`应用残余开展运算符

mapState返回的是一个对象，如果 computed 只包含mapState，那么间接写

 computed: mapState(["userName", "age", "sex"])
// 等同于
computed: {...mapState(["userName", "age", "sex"])
}

如果你的 computed 还有其它 store 之外的属性，那么你须要应用残余运算符，把 mapState 返回的对象和其它计算属性对象合并

<template>
    <div id="app">
        <div> 姓名:{{userName}}</div>
        <div>{{age}}</div>
        <div>{{sex}}</div>
        <div>{{getSexEnglishType}}</div>
    </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
    name: 'test',
    data() {
        return {description: "性别是"}
    },
    computed: {...mapState(["userName", "age", "sex"]),
        getSexEnglishType() {return this.sex == "男" ? "boy" : "girl"}
    }
}
</script>

4. `getters`

顾名思义，getters 就好比是 store 的计算属性 computed，只有当 store 中的依赖产生了扭转，才会从新触发 getters。

import Vue from "vue";
import Vuex from "vuex"
Vue.use(Vuex)
const store = new Vuex.Store({
    state: {
        carList: [{
            type: "公交车",
            count: 1
        }, {
            type: "汽车",
            count: 3
        }, {
            type: "出租车",
            count: 5
        }, {
            type: "卡车",
            count: 7
        }]
    },
    getters: {// getCars(state){//     return state.carList.filter(car=>car.count>4)
        // }
        getCars: state => state.carList.filter(car => car.count > 4)
    }
})
export default store

同 state 获取的形式一样，getters 的获取分为以下三种

在 vue 组件中 (tempalte、data、methods、申明周期函数等) 中拜访
在 vuex 中拜访
在其余 js 文件中拜访

其三类的实现逻辑与 state 相近，这里只介绍在 vue 组件中拜访

通过属性拜访就是间接获取 store 的 getters，再点出具体的获取属性即可

// test-component.vue
<script>
import {mapGetters} from 'vuex'
export default {
    name: 'test',
    data() {
        return {description: "性别是"}
    },
    computed: {getCars() {return this.$store.getters.getCars}
    }
}
</script>

getters 第一个参数是 state，第二个参数是 getters, 那么咱们就能够在一个 getters 办法中应用第二个参数嵌套应用其余的 getters

//store.js
import Vue from "vue";
import Vuex from "vuex"
Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        carList: [{
            type: "公交车",
            count: 1
        }, {
            type: "汽车",
            count: 3
        }, {
            type: "出租车",
            count: 5
        }, {
            type: "卡车",
            count: 7
        }]
    },
    getters: {// getCars(state){//     return state.carList.filter(car=>car.count>4)
        // }
        getCars: (state,getters) => getters.formateCars,
        formateCars(state,getters){return state.carList.filter(car => car.count > 4)
        }
    }
})
export default store

// test-component.vue
<template>
    <div id="app">
        <div> 车辆:{{getCars}}</div>
    </div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
    name: 'test',
    computed: {getCars(state,getters) {return this.$store.getters.getCars},
        
    }
}
</script>

getter 像 computed 办法一样，能够利用返回的匿名函数实现参数的传递，然而这样会导致缓存的作用隐没，当然 computed 如果也是应用返回的匿名函数的形式的调用，那么 computed 的缓存成果也会隐没。

import Vue from "vue";
import Vuex from "vuex"
Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        carList: [{
            type: "公交车",
            count: 1
        }, {
            type: "汽车",
            count: 3
        }, {
            type: "出租车",
            count: 5
        }, {
            type: "卡车",
            count: 7
        }]
    },
    getters: {getCars: (state,getters) => count => state.carList.filter(car=>car.count == count)
    }
})
export default store

// test-component.vue
<template>
    <div id="app">
        <div> 车辆:{{getCars(5) }}</div>
    </div>
</template>

<script>
export default {
    name: 'test',
    computed: {getCars(state,getters) {return this.$store.getters.getCars},
        
    }
}
</script>

4.2 `mapGetters`语法糖

同 mapState 的语法糖一样，mapGetters语法糖也分为对象模式和数组模式，此处就不再赘述。

5. `Mutation`

mutation 是惟一可能更改 Vuex 中 store 的 state 状态的惟一路径，mutation 十分相似于一个回调事件，其键名为字符串的事件类型，其值是一个回调函数，回调函数就是咱们批改 state 的中央，回调函数的第一个参数是 state，第二个是可选参数，他是咱们调用的时候所传入的参数

const store = new Vuex.Store({
  state: {count: 1},
  mutations: {add (state) {
      // 变更状态
      state.count++
    }
  }
})

mutation 是一个回调事件，所以咱们不能间接进行调用，而正确的调用办法是触发这个事件的名字

store.commit('add')

store 在 commit 能够传入参数，其参数分为以下两种模式

载荷模式
对象模式

载荷模式

const store = new Vuex.Store({
  state: {count: 1},
  mutations: {add (state,data) {
   // 变更状态
   state.count += data.count
 }
  }
})

store.commit('increment', {count: 10})

const store = new Vuex.Store({
  state: {count: 1},
  mutations: {add (state,count) {
   // 变更状态
   state.count += data.count
 }
  }
})
store.commit('increment',10)

对象模式
对象模式是指间接应用蕴含 type 属性的对象, 当然以这种模式 commit 所对应的函数的第二个参数必定是一个对象的类型。

const store = new Vuex.Store({
  state: {count: 1},
  mutations: {add (state,data) {
   // 变更状态
   state.count += data.count
 }
  }
})

store.commit({
  type: 'increment',
  count: 10
})

同 vue 的 data 一样，如果是对象模式的 data，如果咱们在对象类型的 state 上须要削减咱们的新属性的时候能够采纳如下计划

Vue.set(obj, 'newProp', 123)
利用开展运算符合并一个新对象
```
state.obj = {...state.obj, newProp: 123}
```
间接让 state 中的数据等一一个新对象，再应用vue.forceupdatevue.forceupdate（偏方，会强制刷新页面，损失页面性能）

应用常量代替 mutation 事件类型在各种，同时把这些常量放在独自的文件中能够让你的代码合作者对整个 app 蕴含的 mutation 高深莫测，
具体而言，store.commit('add')，能够发现，这里 commit 提交的办法 add，是以字符串的模式代入的。如果我的项目小，一个人开发的话倒还好，然而我的项目大了，编写代码的人多了，那就麻烦了，因为须要 commit 的办法一多，就会显得特地凌乱，而且以字符串模式代入的话，一旦出了错，很难排查。

// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'

// store.js
import Vuex from 'vuex'
import {SOME_MUTATION} from './mutation-types'

const store = new Vuex.Store({state: { ...},
  mutations: {
    // 咱们能够应用 ES2015 格调的计算属性命名性能来应用一个常量作为函数名
    [SOME_MUTATION] (state) {// mutate state}
  }
})

为什么 Mutation 必须是同步函数呢，这实质是因为它是一个回调函数，回调函数在异步的时候无奈得悉哪个先实现哪个后实现，比方

foreach(async () => {await ...})

因而，这样会导致一个后果，就是 state 中的数据不晓得什么时候产生的扭转的(不过也的确是扭转了的)，所以 state 不能应用异步函数，这样会失落了其可追踪性。

mutation 的提交有两种形式

组件中间接通过 store.commit(type) 提交
通过 mapMutations 辅助函数提交

import Vue from "vue";
import Vuex from "vuex"
Vue.use(Vuex)

const store = new Vuex.Store({
    state: {count: 1},
    mutations:{add(state){state.count += 1}
    }
})
export default store

<template>
    <div id="app">
        <div> 车辆:{{$store.state.count}}</div>
        <button @click="$store.commit('add')"> 减少 </button>
    </div>
</template>

<script>
export default {name: 'test'}
</script>

或

<template>
    <div id="app">
        <div> 车辆:{{$store.state.count}}</div>
        <button @click="add"> 减少 </button>
    </div>
</template>

<script>
export default {
    name: 'test',
    methods:{add(){this.$store.commit('add')
        }
    }
}
</script>

mapMutations 能够将 store 中的 commit(不是 mutation)办法映射为以后 vue 组件中的办法，其有两种形式

数组模式的映射
对象模式的映射

数组模式的映射很简略，就把 commit 的字符串参数映射为以后组件的办法，它们的名称是统一的, 那么就能够通过数组进行映射。

import {mapMutations} from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations(['increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
      // `mapMutations` 也反对载荷：'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ])
  }
}

对象模式的映射能够把 commit 的 mutation 名称映射为以后组件的其它办法名称

import {mapMutations} from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations(['increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

      // `mapMutations` 也反对载荷：'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
  }
}

正文完

vue.js

发表至： vue.js

2022-02-15

0

关于vue.js:Vue后台管理的通用布局模块

关于vue.js:ts-版-vue-之-vuepropertydecorator

关于vue.js:Vue中动态拼接innerHTML时添加点击click事件并调用vue方法

datavvite-快速构建可视化大屏的vue插件

关于javascript:三维反恐仿真模拟演练推演训练系统软件

关于vue.js:Vuex3x学习

1. 介绍

2. 装置

3. 外围概念

3.1 `State`

3.1.1 `State`的拜访有以下的三种模式

3.1.2 `mapState`语法糖

3.1.2.1 `mapState`对象写法

3.1.2.1 `mapState`数组写法

3.1.2.2 `mapState`应用残余开展运算符

4. `getters`

4.1 getters 的拜访

4.1.1 在组件中通过属性拜访

4.1.2 通过办法拜访

4.2 `mapGetters`语法糖

5. `Mutation`

5.1 commit 参数

5.2 mutation 批改 store 的正确形式

5.3 应用常量 type 来作为 mutation 属性的键名

5.4 Mutation 必须是同步函数

5.5 Mutation 的提交

5.5.1 组件间接提交

5.5.2 mapMutations 语法糖

5.5.2.1 mapMutations 数组模式的映射

5.5.2.1 mapMutations 对象模式的映射

站内搜索

关于vue.js:Vuex3x学习

1. 介绍

2. 装置

3. 外围概念

3.1 State

3.1.1 State的拜访有以下的三种模式

3.1.2 mapState语法糖

3.1.2.1 mapState对象写法

3.1.2.1 mapState数组写法

3.1.2.2 mapState应用残余开展运算符

4. getters

4.1 getters 的拜访

4.1.1 在组件中通过属性拜访

4.1.2 通过办法拜访

4.2 mapGetters语法糖

5. Mutation

5.1 commit 参数

5.2 mutation 批改 store 的正确形式

5.3 应用常量 type 来作为 mutation 属性的键名

5.4 Mutation 必须是同步函数

5.5 Mutation 的提交

5.5.1 组件间接提交

5.5.2 mapMutations 语法糖

5.5.2.1 mapMutations 数组模式的映射

5.5.2.1 mapMutations 对象模式的映射

站内搜索

3.1 `State`

3.1.1 `State`的拜访有以下的三种模式

3.1.2 `mapState`语法糖

3.1.2.1 `mapState`对象写法

3.1.2.1 `mapState`数组写法

3.1.2.2 `mapState`应用残余开展运算符

4. `getters`

4.2 `mapGetters`语法糖

5. `Mutation`