vuex

大型应用往往跨越多个组件。通过多层嵌套传递参数十分复杂，并且Vue没有兄弟组件之间直接共享参数的方法。

https://vuex.vuejs.org/zh/guide/ VueX是专为Vue.js开发的状态管理库。集中式存储管理所有组件的状态简单地说，VueX管理分散在Vue中的各组件的数据 npm install vuex@next (下载最新的)

vue2–vuex3 vue3–vuex4

一般大项目才用每个Vuex的核心都是一个store,与普通的全局对象不同的是，Vue数据和视图绑定，数据改变，绑定的视图也会被重新渲染。 store中的状态不允许直接修改，只能通过提交(commit)mutation这可以让我们跟踪状态的变化

Vuex： State,Getter,Mutation（改变、转变）,Action,Module 状态管理 State 可以使用this.$store.state.count访问数据源也可以用mapstate辅助函数将其映射下来修改state就要通过我们定义的方法去修改 mutation只能做一下同步操作，action可以异步操作不太懂。。。

安装VUEX@3失败可能是因为证书过期了 https://blog.csdn.net/qq_42761482/article/details/121018086

通过commit修改store内容

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


<template>
  <div class="hello" >
    {{ this.$store.state.count }}
    <button @click="add">+1</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  methods:{
    add(){
      this.$store.commit("increment")
      //this.$store.state.count = this.$store.state.count + 1
    }
  }
}
</script>

还可以通过compute获取动态数据

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


<template>
  <div class="hello" >
    <!-- {{ this.$store.state.count }} -->
    {{ count }}
    <button @click="add">+1</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  computed: {
    count(){
      return this.$store.state.count
    }
  },
  methods:{
    add(){
      this.$store.commit("increment")
      //this.$store.state.count = this.$store.state.count + 1
    }
  }
}
</script>

也可以通过mapstate取数据,看不懂。。可以去看官网？ computed:mapState([ ‘count’ ])

可能需要了解filter函数

1
2
3
4
5


getters:{
        doneTodos:state => {
            return state.todos.filter(todo => todo.done)
        }
    }

Helloworld也可以这么写，是映射，调用index里面写的getters

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


export default {
  name: 'HelloWorld',
  computed:{
    ...mapState([
      'count','todos'
    ]),
    ...mapGetters([
      'doneTodos'
    ])
  },
  
  methods:{
    add(){
      this.$store.commit("increment")
      //this.$store.state.count = this.$store.state.count + 1
    }
  }
}
</script>