013状态管理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,Module013状态管理VueX_第1张图片
State
可以使用this.$store.state.count访问数据源
也可以用mapstate辅助函数将其映射下来
修改state就要通过我们定义的方法去修改
mutation只能做一下同步操作,action可以异步操作
不太懂。。。

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

通过commit修改store内容




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




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

可能需要了解filter函数

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

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

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
    }
  }
}

你可能感兴趣的:(vue)