vuex
程序员文章站
2024-02-28 16:06:04
...
vuex
• 参考网址：https://vuex.vuejs.org/zh/guide/mutations.html
• Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
• 每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：
• Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
• 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。
• Vue适用于中大型单页面应用
• 数据传递：把各个组件共享的状态抽离出来，并且每个组件都可以使用它，并且还可以更改它；既然是公共状态，当其中组件把这个公共状态更改以后，凡是依赖这个公共状态的组件都要更新；
• 在使用vuex的时候要给实例先写上store属性
• 单向数据流
• state，驱动应用的数据源；
• view，以声明方式将 state 映射到视图；
• actions，响应在 view 上的用户输入导致的状态变化。
核心概念
state
• 如果这个数据是好几个组件共享的，这个数据放到VUEX的state上；如果这个数据只有当前这一个组件使用，那么放到对应的组件的data中
• state在vuex中类似于vue实例中的data，是用来储存数据的
• Vuex 使用单一状态树（状态就是数据）
• state里的数据最好放在实例或组件的计算属性中使用，因为当state里的数据更新后，所有使用它的数据也会立刻更新
• mapState 辅助函数；当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性
• 当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。
• 对象展开运算符，可以在计算属性中将mapstate函数返回的对象展开
getter
• vue允许定义getter，在store（vuex的实例）中的计算属性，也会被缓存；当依赖的值发生变化，才会改变
mutations
• mutation用来修改state中的值
• vuex更改store中状态的唯一办法就是commit
• mutation 这个对象中的函数的第一个参数的实参都是state；
• 在mutation的方法中，都是同步事务，不支持异步；（追踪工具追踪不到）
actions
• actions 支持异步，这里面提交一个mutation的动作
• actions里的方法的第一个参是store上的commit（第一个参必须加大括号）
module
• 这个modules会把各自模块的state,getters,mutations,actions最终都会注入到该Store中（相当于在store添加了一个键值对）
• 把数据模块化，modules引入的模块，最后都相当于放入了state中
mutations
• mutation用来修改state中的值
• vuex更改store中状态的唯一办法就是commit
• mutation 这个对象中的函数的第一个参数的实参都是state；
• 在mutation的方法中，都是同步事务，不支持异步；（追踪工具追踪不到）
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<first></first>
<second></second>
<div>{{this.$store.state.count}}</div>
</div>
<script src="../../node_modules/vue/dist/vue.js"></script>
<script src="../../node_modules/vuex/dist/vuex.js"></script>
<script>
let store = new Vuex.Store({
state:{
count:100, // count : 这就是公共的数据
shop:[{name:"奔驰"},{name:"奥迪"}]
},
getters:{
// getters : vue允许定义getter;在store中的计算属性；也会被缓存；当依赖的值发生变化，才会发生改变
str(state){// state 就是store中的state
return state.count%2 === 0?"偶数":"奇数"
}
},
mutations:{
//vuex更改store中状态的唯一方法就是commit;
// state： 状态 payload: 载荷
increment(state,payload){
// 第一个参数接收到当前state，第二个为事件传的参
// mutation 这个对象中的函数的第一个参数的实参都是state；
// 在mutation的方法中，都是同步事务，不支持异步；
state.count += payload;
}
},
actions:{
addNum({commit},payload){
//commit : 就是store上的commit
//actions 支持异步，这里面提交一个mutation的动作
commit('increment',payload)
}
}
})
let first = {
data() {
return {
}
},
methods: {
// 提交的是mutation里面的函数名；用于修改store中的数据
/* increment(val){
this.$store.commit("increment",val)
} */
//...Vuex.mapMutations(['increment'])
/* ...Vuex.mapMutations({
increment:'increment'
// 将this.increment()映射成'this.$store.commit("increment")
}), */
/* actions的常规写法
add(val){
this.$store.dispatch("addNum",val);
} */
...Vuex.mapActions({
add:"addNum"
})
},
/* computed: {
shop(){
return this.$store.state.shop
}
}, */
/* VUEx.mapState:将vuex的store中的state数据，映射到当前实例的计算属性上；
computed:Vuex.mapState(['shop','count']), */
//对象展开运算符
computed:{
//Vuex的私有属性提供了mapState mapGetters MapMutations;可以将store中的state、getters、mutations都映射当前的实例的computed或methods;这几个函数都会返回一个包装后的对象
...Vuex.mapState(['shop','count']),
...Vuex.mapGetters(['str'])
},
template:"<div>{{this.$store.state.count}} <button @click='add(3)'>++</button> <li v-for='(item, index) in shop'>{{item.name}}</li>{{str}}</div>"
}
let second = {
data() {
return {
}
},
template:"<div>{{this.$store.state.count}}</div>"
}
let vm = new Vue({
el:"#app",
data() {
return {
}
},
components:{
first,
second
},
store,store // 当前vue的实例就会新增一个$store的属性，属性值时一个对象；同时也会给当前的子组件新增一个$store属性
})
</script>
</body>
</html>
//module例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<first></first>
<second></second>
</div>
<script src="../../node_modules/vuex/dist/vuex.min.js"></script>
<script src="../../node_modules/vue/dist/vue.js"></script>
<script>
// modues:
let moudesA={
state:{
a:100
},
getters:{
str1(state,a){
return state.a === 99;
}
},
}
let moudesB={
state:{
num:88
}
}
let store = new Vuex.Store({
state:{
count:0
},
getters:{
str(state){
return state.count%2===0?"偶数":"奇数";
}
},
mutations:{
add_count(state,payload){// state: 默认接收一个state
state.count+=payload;
}
},
actions:{
add({commit},val){// 提交一个mutations
setTimeout(()=>{
commit("add_count",val)
},1000)
}
},
modules:{
// 这个modules会把各自模块的state,getters,mutations,actions最终都会注入到该Store中
first:moudesA,
second:moudesB
}
});
let first={
data(){
return {}
},
methods:{
...Vuex.mapMutations(["add_count"]),
addState(val){
this.$store.dispatch("add",val);
}
},
computed:{
...Vuex.mapGetters(["str"]),
...Vuex.mapGetters(['str1'])
},
template:"<div>{{$store.state.count}}<button>新增</button>{{str}}{{$store.state.first.a}}{{str1}}</div>"
}
let second={
data(){
return {}
},
template:"<div>{{$store.state.count}}</div>"
}
let vm = new Vue({
el:"#app",
data:{
},
components:{
first,
second
},
store
})
</script>
</body>
</html>