关于vuex

目录

首先我们看一看什么是vuex

那么我们怎么使用vuex呢？

1.state：

2.mutations：

3.actions 里面只能写异步方法

首先我们看一看什么是vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

那么我们怎么使用vuex呢？

1. 引入vuex :import Vuex from "vuex"

2. 下载vuex ：yarn add vuex@3

3. 调用vuex中的一个install方法：Vue.use(vuex)

4. 配置项：const store = new vuex.Store

main.js中：

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

1.state：

在页面应用state的数据的方法

// 1.直接使用插值表达式{{$store.state.count}}

// 2.在计算属性中使用 // count(){ // return this.$store.state.count; // }

// 3.相当于延展到计算属性中的一个变量

// ...mapState(["count"]), // mapState内置的辅助函数

const store = new Vuex.Store({
 state:{
  count:0
 }
})
new Vue({
 render: h => h(App),
 store
}).$mount('#app')
app.vue中：
 state的数据{{$store.state.count}}
 import {mapState} from "vuex"
 computed: {//计算属性
    // count(){
    //   return this.$store.state.count;
    // },
    ...mapState(["count"]),
  },

2.mutations：

在页面上使用mutations方法的两种方式：

// 1.在methods中使用点击事件this.$store.commit("addCount")

// "addCount"为main.js mutations中同步的方法

// 或者在在methods中使用点击事件this.$store.commit("addsCount",10)

// 10为mutations中payload载荷

// 2.在methods中使用延展符...mapMutations(["extensionCount"])

// "extensionCount"为main.js mutations中同步的方法

// mapMutations为vuex内置的辅助函数

 app.vue中
点击事件
methods: {
    addCount(){
      this.$store.commit("addCount")
    },
    addsCount(){
      this.$store.commit("addsCount",10)
    },
    ...mapMutations(["extensionCount"]),
  
  }
  
  
main.js中
const store = new Vuex.Store({
 mutations:{
    //修改state状态必须是同步代码
    // addCount自定义
    addCount(state){
      state.count+=1
    },
    addsCount(state,payload){
      state.count+=payload
    },
    extensionCount(state){
      state.count+=20
    }
  },
})

3.actions 里面只能写异步方法

// context表示store的实例 // context.state获取状态 // 通过context.commit来提交mutations // context.dispatch调用其他的actions

main.js中
const store = new Vuex.Store({
  actions:{
    getAsyncCount(context){
      setTimeout(function(){
        context.commit("addsCount",123)
      },1000)

    }
  }
})
app.vue中
methods: {
  addtAsyncCount(){ 
     this.$store.dispatch("getAsyncCount")
  }
}