Vue vuex

state

state:{
    count:0,
    obj:{},
    arr:[]
    ...
}

Vuex的state状态是响应式，是借助vue的data是响应式，将state存入vue实例组件的data中；Vuex的getters则是借助vue的计算属性computed实现数据实时监听。

getters

getters:{
  fullname(state,getters){

  }
}

• 参数
  • state 本vuex对象中的state
  • getters 本vuex对象中的getters

// moduleA 中的 getters
const moduleA = {
  state: {
    msg: "123456"
  },
  getters:{
  fullname(state,getters,rootState){
      rootState.count
    }
  }
}

• 参数
  • rootState: 指根对象上的状态

actions

  actions: {
    changesome(context,payload) {
      context.commit("xxx", payload)
    }
  },

• 参数
  • context: 上下文(所在对象的)
  • payload: 接收的参数

// moduleA 中的 actions
const moduleA = {
  state: {
    msg: "123456"
  },
  actions: {
    changesome(context,payload) {
      context.commit("xxx", payload)
    }
  },
}

• 参数

  • context: 上下文(指的是moduleA的上下文)
    • commit():提交到当前模块
    • rootGetters: 根的 getters
    • rootState : 根的 state
    • state: 当前模块的 state
  • payload: 接收的参数

• 可结构出来使用

  actions: {
    changesome({state,commit,rootState}) {
      //...
    }
  },

mutations

const store = new Vuex.Store({
  mutations: {
    updates(state, item) {
      state.info.name = "张" + item
    },

  },
})

• 参数
  • state:本 vuex 对象的 state
  • item: 传递的数据

vuex 使用步骤

• 方式一

<!-- 页面中 -->
<button @click="changeone">修改</button>

// 组件、页面中的 methods
 methods: {
    changeone() {
      let item = "msg";
      this.$store.dispatch("changeone", item); //传递参数
    },
  },

// store/index.js
const store = new Vuex.Store({
  state: {  },
  getters: {  },
  actions: {
    changeone(context, payload) { // 接受参数 itme
      setTimeout(() => {
        context.commit("updates", payload) // 传递参数
      }, 1000);
    },
  },
})

// store/index.js
const store = new Vuex.Store({
  state: {  },
  getters: {  },
  mutations: {
    updates(state, payload) { // 接收参数
      state.info.name = "张" + payload // 使用参数
    },
  }
})

• 方式二(主要是传参方式不同)

<!-- 页面中 -->
<button @click="changeone">修改</button>

// 组件、页面中的 methods
 methods: {
    changeone() {
      let item = "msg";
      this.$store.dispatch("changeone", {
            msg:"我完成了",
            success:()=>{
              console.log("状态是完成了")
          }
      }); //传递参数
    },
  },

// store/index.js
const store = new Vuex.Store({
  state: {  },
  getters: {  },
  actions: {
    changeone(context, payload) { // 接受参数 itme
      setTimeout(() => {
        context.commit("updates", payload) // 传递参数
        console.log(payload.msg)
        payload.sccess()
      }, 1000);
    },
  },
})

// store/index.js
const store = new Vuex.Store({
  state: {  },
  getters: {  },
  mutations: {
    updates(state, payload) { // 接收参数
      state.info.name = "张" + payload // 使用参数
    },
  }
})

• 方式三(优雅promise)

<!-- 页面中 -->
<button @click="changeone">修改</button>

// 组件、页面中的 methods
 methods: {
    changeone() {
      let item = "msg";
      this.$store
      .dispatch("changeone", "状态是完成了")//传递参数
      .then((res,rej)=>{
        console.log("状态是完成了")
        console.log(res)
      })
    },
  },

// store/index.js
const store = new Vuex.Store({
  state: {  },
  getters: {  },
  actions: {
    changeone(context, payload) { // 接受参数 itme
      return new Promise((resolve,reject)=>{
        setTimeout(() => {
        context.commit("updates", payload) // 传递参数
        console.log(payload)
        resolve("123")
      }, 1000);
      })
    },
  },
})

// store/index.js
const store = new Vuex.Store({
  state: {  },
  getters: {  },
  mutations: {
    updates(state, payload) { // 接收参数
      state.info.name = "张" + payload // 使用参数
    },
  }
})

modules

1. 定义modules

const moduleA = {
  state: {
    msg: "123456"
  },
}
const moduleB = {
  state: {
    msg: "ABC"
  },
  actions: {

  }
}
const store = new Vuex.Store({
  state: {  },
  getters: {  },
  actions: {  },
  mutations: {  },
  modules: {
    A: moduleA,
    B: moduleB
  }
})

2. 使用

• state 使用时要区别 moduleA 和moduleB
• getters actions mutations 不区分 模块,只要名字对即可。
• 在模块中使用getters 有第三个参数

• state 中的数据使用

  <div>{{ $store.state.A.msg }}</div>

• methods

methods:{
   changesome() {
      this.$store.dispatch("changesome");
    },
}

• actions

const moduleA = {
  state: {
    msg: "123456"
  },
  actions: {
    changesome(context) {
      context.commit("changesome")
    }
  },
  mutations: {}
}

• motutions

const moduleA = {
  state: {
    msg: "123456"
  },
  actions: { },
  mutations: {
    changesome(state) {
      state.msg = "ABC"
    }
  }
}