Vuex 五个核心【State，Getter，Mutation，Action，Module】
发布时间
阅读量：
阅读量
Vue是什么?
Vuum 是一个专为 Vue.js 应用程序开发的核心状态管理工具。它是基于集中式存储模型来管理所有组件的状态，并遵循特定规则确保状态变化具有可预测性。
vuex是一种基于中心化的架构设计的应用程序框架，在实现跨组件数据的一致性和可访问性方面具有显著的作用
众所周知，在组件之间传递数据通常采用事件驱动机制EventBus这一标准做法当然还可以借助父组件这一中间环节来实现数据传递因此在涉及祖孙级组件的数据传输时会面临较大的挑战所以对于小型项目而言这种方案已经足够但对于规模较大的应用我们不得不寻找更高效的解决方案而官方提供的官方亲儿子库轴系统vxuex正是为了解决这些问题而生（虽然它确实有些让人怀念- -）
这个状态自管理应用包含以下几个部分：
data source ，是驱动应用的核心数据存储；
view is declared by mappings to the view；
operations in response to user input altering the state.
以下是一个表示"单向数据流"理念的简单示意图
初始化项目:
动态加载
动态加载
动态加载
vuex基础-state:
state字段用于存储所有公共状态信息。当你有一个State对象需要处理公共状态数据时，请确保在创建该对象时指定该state字段。
store/index.vue
import Vue from 'vue'
// 1.引入库
import Vuex from 'vuex'
// 2.注册（其实是执行了Vuex内的install方法
//vuex: 全局状态共享 state:状态
// 全局: 所有组件都能共享使用 state 中的值
Vue.use(Vuex)
export default new Vuex.Store({
// 3.书写在 state 中的变量, 就可以全局共享, 在所有组件中都可以使用
state: {
//管理数据
count:0,
name:'zs'
},
mutations: {
},
actions: {
},
modules: {
}
})该.vue项目可以放置于view文件夹或components文件夹中，并非强制要求。
<template>
<div>
<!-- 怎么在组件中获取count 和 name？ -->
<!-- 这是原始的插值语法 -->
<div>{{$store.state.count}}</div>
<div>{{$store.state.name}}</div>
<!-- 这是语法糖写法 这种写法比较多人喜欢 它有三个步骤 -->
<!-- 3.使用接收 -->
<div>{{count}}</div>
<div>{{name}}</div>
</div>
</template>
<script>
// 1.引入mapState
import { mapState } from 'vuex'
export default {
computed:{
// 语法糖写法 mapState是辅助函数 帮助我们把store中的数据映射到 组件的计算属性中
// 2.采用数组形式引入state属性,并用扩展运算符将导出的状态映射给计算属性
...mapState(["count","name"])
}
}
</script>
<style lang="scss" scoped>
</style>
vuex基础-mutations ：
state数据变更仅限于mutations这一操作，并且这些mutations必须实现同步更新以形成**数据快照**。 mutations作为一个操作域存放着对state进行变更的方法。
在Vuum架构中不允许包含任何异步脚本代码。 如果存在需要执行异步请求的操作则需要将这些处理逻辑放置在actions属性中。
store/index.vue
import Vue from 'vue'
// 1.引入库
import Vuex from 'vuex'
// 2.注册（其实是执行了Vuex内的install方法
//vuex: 全局状态共享 state:状态
// 全局: 所有组件都能共享使用 state 中的值
Vue.use(Vuex)
export default new Vuex.Store({
// 3.书写在 state 中的变量, 就可以全局共享, 在所有组件中都可以使用
state: {
//管理数据
count:0,
name:'zs'
},
mutations: {
// 定义mutation
// 第一个参数是store的state属性
addCount(state){
state.count++
}
},
actions: {
},
modules: {
}
})该Vue组件既可以部署到视图目录也可以部署到组件目录,或者说是自行创建一个新文件夹存放
<template>
<div>
<!-- 怎么在组件中获取count 和 name？ -->
<!-- 这是原始的插值语法 -->
<div>{{$store.state.count}}</div>
<div>{{$store.state.name}}</div>
<!-- 这是语法糖写法 这种写法比较多人喜欢 它有三个步骤 -->
<!-- 3.使用接收 -->
<!-- 绑定一个方法 不过测试是两个count都会自增变化因为这是全局共享的数据 解决方法：封装组件 -->
<div @click="addCount">{{count}}</div>
<div>{{name}}</div>
</div>
</template>
<script>
// 1.引入mapState
import { mapMutations, mapState } from 'vuex'
export default {
computed:{
// 语法糖写法 mapState是辅助函数 帮助我们把store中的数据映射到 组件的计算属性中
// 2.采用数组形式引入state属性,并用扩展运算符将导出的状态映射给计算属性
...mapState(["count","name"])
},
methods:{
// 如何在组建中调用mutations？
// 1.这是在methods调用方法addCount
// 这是原始写法
addCount(){
this.$store.commit("addCount")
},
// 这是语法糖写法
...mapMutations(["addCount"])
}
}
</script>
<style lang="scss" scoped>
</style>带参数传递：
store/index.vue
import Vue from 'vue'
// 1.引入库
import Vuex from 'vuex'
// 2.注册（其实是执行了Vuex内的install方法
//vuex: 全局状态共享 state:状态
// 全局: 所有组件都能共享使用 state 中的值
Vue.use(Vuex)
export default new Vuex.Store({
// 3.书写在 state 中的变量, 就可以全局共享, 在所有组件中都可以使用
state: {
//管理数据
count:0,
name:'zs'
},
mutations: {
// 定义mutation
// 第一个参数是store的state属性
addCount(state,n){
state.count+=n
}
},
actions: {
},
modules: {
}
})该.vue文档可以选择放置于view目录或components目录中,无需另建新文档
原始带参数传递：
<template>
<div>
<!-- 怎么在组件中获取count 和 name？ -->
<!-- 这是原始的插值语法 -->
<div>{{$store.state.count}}</div>
<div>{{$store.state.name}}</div>
<!-- 这是语法糖写法 这种写法比较多人喜欢 它有三个步骤 -->
<!-- 3.使用接收 -->
<!-- 绑定一个方法 不过测试是两个count都会自增变化因为这是全局共享的数据 解决方法：封装组件 -->
原始带参数传递与语法糖区别
<div @click="addCount">{{count+10}}</div>
<div>{{name}}</div>
</div>
</template>
<script>
// 1.引入mapState
import { mapMutations, mapState } from 'vuex'
export default {
computed:{
// 语法糖写法 mapState是辅助函数 帮助我们把store中的数据映射到 组件的计算属性中
// 2.采用数组形式引入state属性,并用扩展运算符将导出的状态映射给计算属性
...mapState(["count","name"])
},
methods:{
addCount() {
// 调用store中的mutations 提交给muations
// commit('muations名称', 10)
this.$store.commit("addCount", 10); // 直接调用mutations
},
}
}
</script>
<style lang="scss" scoped>
</style>语法糖带参传递：
<template>
<div>
<!-- 怎么在组件中获取count 和 name？ -->
<!-- 这是原始的插值语法 -->
<div>{{$store.state.count}}</div>
<div>{{$store.state.name}}</div>
<!-- 这是语法糖写法 这种写法比较多人喜欢 它有三个步骤 -->
<!-- 3.使用接收 -->
<!-- 绑定一个方法 不过测试是两个count都会自增变化因为这是全局共享的数据 解决方法：封装组件 -->
原始带参数传递与语法糖区别
<div @click="addCount(10)">{{count+10}}</div>
<div>{{name}}</div>
</div>
</template>
<script>
// 1.引入mapState
import { mapMutations, mapState } from 'vuex'
export default {
computed:{
// 语法糖写法 mapState是辅助函数 帮助我们把store中的数据映射到 组件的计算属性中
// 2.采用数组形式引入state属性,并用扩展运算符将导出的状态映射给计算属性
...mapState(["count","name"])
},
methods:{
// 这是语法糖写法
...mapMutations(["addCount"])
}
}
</script>
<style lang="scss" scoped>
</style>vuex基础-actions：
store/index.vue
state用于存储数据；mutations负责同步更新数据；actions则执行异步操作。
import Vue from 'vue'
// 1.引入库
import Vuex from 'vuex'
// 2.注册（其实是执行了Vuex内的install方法
//vuex: 全局状态共享 state:状态
// 全局: 所有组件都能共享使用 state 中的值
Vue.use(Vuex)
export default new Vuex.Store({
// 3.书写在 state 中的变量, 就可以全局共享, 在所有组件中都可以使用
state: {
//管理数据
count: 0,
name: 'zs'
},
mutations: {
// 定义mutation
// 第一个参数是store的state属性
// addCount(state){
// state.count++
// },
addCount(state, n) {
state.count += n
}
},
actions: {
// 获取异步的数据 context表示当前的store的实例
// 可以通过 context.state 获取状态
// 也可以通过context.commit 来提交mutations，
// 也可以 context.diapatch调用其他的action
getAsyncCount(context) {
setTimeout(function () {
// 一秒钟之后 要给一个数 去修改state
context.commit('addCount', 100)
}, 1000)
}
},
modules: {}
})这个.vue项目放置于view文件夹或components文件夹皆可；并创建一个新的Vue组件
<template>
<div>
<!-- 怎么在组件中获取count 和 name？ -->
<!-- 这是原始的插值语法 -->
<div>{{ $store.state.count }}</div>
<div>{{ $store.state.name }}</div>
<!-- 这是语法糖写法 这种写法比较多人喜欢 它有三个步骤 -->
<!-- 3.使用接收 -->
<!-- 绑定一个方法 不过测试是两个count都会自增变化因为这是全局共享的数据 解决方法：封装组件 -->
<!-- <div @click="addCount">{{count}}</div>
<div>{{name}}</div> -->
<div @click="addCount(10)">{{ count + 10 }}</div>
<div>{{ name }}</div>
<button @click="getAsyncCount">count+100</button>
</div>
</template>
<script>
// 1.引入mapState
import { mapActions, mapMutations, mapState } from "vuex";
export default {
computed: {
// 语法糖写法 mapState是辅助函数 帮助我们把store中的数据映射到 组件的计算属性中
// 2.采用数组形式引入state属性,并用扩展运算符将导出的状态映射给计算属性
...mapState(["count", "name"]),
},
methods: {
// 如何在组建中调用mutations？
// 1.这是在methods调用方法addCount
// 这是原始写法
// addCount(){
// this.$store.commit("addCount")
// },
// 这是语法糖写法
...mapMutations(["addCount"]),
//原始写法
addCount() {
// 调用store中的mutations 提交给muations
// commit('muations名称', 10)
this.$store.commit("addCount", 10); // 直接调用mutations
},
//原始写法带参传递
getAsyncCount(data) {
this.$store.dispatch("getAsyncCount", data);
},
//语法糖写法
...mapActions(["getAsyncCount"]),
},
};
</script>
<style lang="scss" scoped>
</style>vuex基础-getters：
该库使得我们在存储中能够实现类似于计算属性的'getter'功能。其返回值会被缓存直至其依赖发生变化时才会重新计算。
store/index.vue
import Vue from 'vue'
// 1.引入库
import Vuex from 'vuex'
// 2.注册（其实是执行了Vuex内的install方法
//vuex: 全局状态共享 state:状态
// 全局: 所有组件都能共享使用 state 中的值
Vue.use(Vuex)
export default new Vuex.Store({
// 3.书写在 state 中的变量, 就可以全局共享, 在所有组件中都可以使用
state: {
//管理数据
count: 0,
name: 'zs',
list: [1,2,3,4,5,6,7,8,9,10]
},
mutations: {
// 定义mutation
// 第一个参数是store的state属性
// addCount(state){
// state.count++
// },
addCount(state, n) {
state.count += n
}
},
actions: {
// 获取异步的数据 context表示当前的store的实例
// 可以通过 context.state 获取状态
// 也可以通过context.commit 来提交mutations，
// 也可以 context.diapatch调用其他的action
getAsyncCount(context) {
setTimeout(function () {
// 一秒钟之后 要给一个数 去修改state
context.commit('addCount', 100)
}, 1000)
}
},
getters: {
// getters函数的第一个参数是 state
// 必须要有返回值
filterList: state => state.list.filter(list => list>3)
},
modules: {}
})这个.vue项目可以将其放置于View或Component目录中，并非必须；也可以手动创建
<template>
<div>
<!-- 怎么在组件中获取count 和 name？ -->
<!-- 这是原始的插值语法 -->
<div>{{ $store.state.count }}</div>
<div>{{ $store.state.name }}</div>
<!-- 这是语法糖写法 这种写法比较多人喜欢 它有三个步骤 -->
<!-- 3.使用接收 -->
<!-- 绑定一个方法 不过测试是两个count都会自增变化因为这是全局共享的数据 解决方法：封装组件 -->
<!-- <div @click="addCount">{{count}}</div>
<div>{{name}}</div> -->
<!-- Mutations -->
<div @click="addCount(10)">{{ count + 10 }}</div>
<div>{{ name }}</div>
<!-- Actions -->
<button @click="getAsyncCount">count+100</button>
<!-- getters -->
<div>{{ $store.getters.filterList }}</div>
<div>{{filterList}}</div>
</div>
</template>
<script>
// 1.引入mapState
import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
export default {
computed: {
// 语法糖写法 mapState是辅助函数 帮助我们把store中的数据映射到 组件的计算属性中
// 2.采用数组形式引入state属性,并用扩展运算符将导出的状态映射给计算属性
...mapState(["count", "name"]),
// 语法糖写法
...mapGetters(['filterList']),
},
methods: {
// 如何在组建中调用mutations？
// 1.这是在methods调用方法addCount
// 这是原始写法
// addCount(){
// this.$store.commit("addCount")
// },
// 这是语法糖写法
...mapMutations(["addCount"]),
addCount() {
// 调用store中的mutations 提交给muations
// commit('muations名称', 10)
this.$store.commit("addCount", 10); // 直接调用mutations
},
getAsyncCount(data) {
this.$store.dispatch("getAsyncCount", data);
},
...mapActions(["getAsyncCount"]),
},
};
</script>
<style lang="scss" scoped>
</style>全部评论 (0)
还没有任何评论哟~