Vuex(State、Getter、Mutation、Action)

State

1.创建state状态,状态就是那个存数据的对象

就类似于之前的Data，但是这个state全局都可以使用

添加：

  state: {

    msg: "我就是所有共享的数据"

  }

使用：

    <h1>页面上使用------{{$store.state.msg}}</h1>

组件中访问数据------this.$store.state.msg

 

 

 

Getter

getter就就像是store的计算属性,它会传入state对象供我们操作

 

定义：在mian.js/Vuex中定义 getters属性，传入state参数。定义函数计算state中的数据并返回

  getters:{

    age(state){

      return new Date().getFullYear()-new Date(state.birth).getFullYear()

    }

  }

使用：利用$store.getters.age语句访问getters中的返回值

   <h2>页面上使用语句------{{$store.getters.age}}岁</h2>

 

 

Mutation

组件中希望更改 Vuex 的 store 中的状态(数据)的唯一方法是提交 mutation不要用赋值表达式直接在组件中给store设置新数据这样设计的原因是,只有通过mutation来更新数据,它才会去帮我们通知所有使用数据的组件更新数据 刷新UI

注意:一条重要的原则就是要记住 mutation 必须是同步处理（官方说是不要使用异步操作，因为不好看调试结果）

定义：在mian.js/Vuex中定义 mutations属性，并在属性中定义修改值的函数，后面使用时就可以将函数名直接当作变量来使用

 

const store = new Vuex.Store({

  state: {

    msg: "我就是所有共享的数据"

  },

  mutations:{

    changedata(state,obj){

      state.msg=obj.value

    }

  }

})

错误的定义案例：

  mutations: {

    increment (state,obj) {

    //如果fnAsync函数是一个异步业务函数,就会导致更新失败

    fnAsync(() => {

      state.count=obj.n

    })

    }

     },

 

使用：通过 this.$store.commit()调用 mutations中的函数来进行修改仓库中的值

 

    methods: {

        change() {

            this.$store.commit("changedata", { value: "box2修改的值" })//直接传入值

            this.$store.commit({type:"changedata",  n: "box2修改的值" })//传入一个对象

        }

    }

Action

Action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作。

 

定义：用commit调用的一定是mutations属性中的函数

  actions:{

    // 可以使用异步函数

    changedata2(ctx,obj){

      setTimeout(()=>{

        ctx.commit("changedata",obj)

      },100)

    }

  }

 

使用：利用this.$store.dispatch（）指令来修改值

    methods: {

        change() {

            this.$store.dispatch("changedata2", { value: "box2修改的值" })

        }

    }