vuex基础

基于vue2的vuex
vuex官方文档 https://vuex.vuejs.org/zh/

---

一、State(类似data)

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  // state类似data
  state: {
    count: 1,
    todos: [
      { id: 1, done: true },
      { id: 2, done: false }
    ]
  }
})

页面中访问

<template>
  <div class="home">
    {{ count }}
  </div>
</template>

<script>
// mapState返回的是一个包含全部state属性的对象
import { mapState } from 'vuex'
export default {
  // 将state放computed使属性变响应式
  computed: {
  	// 通过解构获取count属性
    ...mapState(['count'])
  }
}
</script>

二、Getter(类似计算属性)

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  // state类似data
  state: {
    count: 1,
    todos: [
      { id: 1, done: true },
      { id: 2, done: false },
      { id: 3, done: true }
    ]
  },
  // getters类似计算属性
  getters: {
    // 通过计算属性获取done为true的对象
    // { todos } 解构为 state的属性  // doneTodosCount(state)
    doneTodosCount({ todos }) {
      return todos.filter(todo => todo.done)
    },
    // 传入参数
    getTodoById: ({ todos }) => (id) => {
      return todos.find(todo => todo.id === id)
    }
  }
})

页面中使用

<template>
  <div class="home">
    {{ count }}
    {{ doneTodosCount }}
    {{ getTodoById(3) }}
  </div>
</template>

<script>
import { mapState, mapGetters} from 'vuex'
export default {
  computed: {
  	// mapGetters返回的是一个包含全部getters的对象
    ...mapGetters(['doneTodosCount', 'getTodoById']),
    ...mapState(['count'])
  }
}
</script>

三、Mutation(类似methods)

调用mutations this.$store.commit(‘mutationName’)

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  // state类似data
  state: {
    count: 1,
    todos: [
      { id: 1, done: true },
      { id: 2, done: false },
      { id: 3, done: true }
    ]
  },
  // mutations 类似 methods
  mutations: {
    // 通过state访问count属性
    getCount(state) {
      console.log(state.count)
    },
    // 通过state修改count属性
    // { count } 解构对象中的count属性
    increment(state, { count }) {
      state.count += count
    },
    // 对象风格提交方式提交载荷(调用方法并传入参数)
    increment2(state, { count }) {
      // 调用其他 mutations方法
      this.commit({
        type: 'increment',
        count
      })
    }
  }
})

页面中使用

<template>
  <div class="home">
    {{ count }}
    <button @click="increment({ count: 1 })">+1</button>
    <button @click="increment2({count: 10})">+10</button>
    <button @click="increment3(100)">+100</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from 'vuex'
export default {
  methods: {
    ...mapMutations(['increment', 'increment2']),
    increment3(count) {
      // 直接调用mutations方法
      this.$store.commit({
        // type 属性值为 muttations方法名
        type: 'increment',
        count
      })
    }
  }
}
</script>

四、Action(类似异步的methods)

1.Action 提交的是 mutation，而不是直接变更状态。
2.Action 可以包含任意异步操作。
3.调用 action this.$store.dispatch(‘action Name’)

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  // state类似data
  state: {
    count: 1,
    todos: [
      { id: 1, done: true },
      { id: 2, done: false },
      { id: 3, done: true }
    ]
  },
  // mutations 类似 methods
  mutations: {
    // 通过state修改count属性
    // { count } 解构对象中的count属性
    increment(state, { count }) {
      state.count += count
    },
    increment5(state, { count }) {
      // 调用actions 调用方法和mutations一样 commit改为dispatch
      this.dispatch({
        type: 'incrementAsync',
        count
      })
    }
  },
  // Action 提交的是 mutation，而不是直接变更状态。
  // Action 可以包含任意异步操作。
  actions: {
    incrementAsync ({ commit }, { count }) {
      setTimeout(() => {
        commit('increment', { count })
      }, 1000)
    }
  }
})

页面中使用

<template>
  <div class="home">
    {{ count }}
    <button @click="increment({ count: 1 })">+1</button>
    <button @click="incrementAsync(1000)">1秒后+1000</button>
    <button @click="increment5({count: 10000})">1秒后+10000</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapMutations(['increment']),
    ...mapActions(['incrementAsync'])
  }
}
</script>

五、全部代码

//  vuex

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  // state类似data
  state: {
    count: 1,
    todos: [
      { id: 1, done: true },
      { id: 2, done: false },
      { id: 3, done: true }
    ]
  },
  // 计算顺序类似
  getters: {
    // 通过计算属性获取done为true的对象
    // { todos } 解构 state
    doneTodosCount({ todos }) {
      return todos.filter(todo => todo.done)
    },
    // 传入参数
    getTodoById: ({ todos }) => (id) => {
      return todos.find(todo => todo.id === id)
    }
  },
  // mutations 类似 methods
  mutations: {
    // 通过state访问count属性
    getCount(state) {
      console.log(state.count)
    },
    // 通过state修改count属性
    // { count } 解构对象中的count属性
    increment(state, { count }) {
      state.count += count
    },
    // 对象风格提交方式提交载荷(调用方法并传入参数)
    increment2(state, { count }) {
      // 调用其他mutations方法
      this.commit({
        type: 'increment',
        count
      })
    },
    increment5(state, { count }) {
      // 调用actions 调用方法和mutations一样 commit改为dispatch
      this.dispatch({
        type: 'incrementAsync',
        count
      })
    }
  },
  // Action 提交的是 mutation，而不是直接变更状态。
  // Action 可以包含任意异步操作。
  actions: {
    incrementAsync ({ commit }, { count }) {
      setTimeout(() => {
        commit('increment', { count })
      }, 1000)
    }
  },
  modules: {}
})

// vue

<template>
  <div class="home">
    {{ count }}
    {{ doneTodosCount }}
    {{ getTodoById(3) }}
    <button @click="increment({ count: 1 })">+1</button>
    <button @click="increment2({count: 10})">+10</button>
    <button @click="increment3(100)">+100</button>
    <button @click="incrementAsync(1000)">1秒后+1000</button>
    <button @click="increment5({count: 10000})">1秒后+10000</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  computed: {
    ...mapGetters(['doneTodosCount', 'getTodoById']),
    ...mapState(['count'])
  },
  methods: {
    ...mapMutations(['increment', 'increment2', 'increment5']),
    ...mapActions(['incrementAsync']),
    increment3(count) {
      // 直接调用mutations方法
      this.$store.commit({
        // type 属性值为 muttations方法名
        type: 'increment',
        count
      })
    }
  }
}
</script>

六、持久化

vuex存储在内存中页面刷新数据就会丢失，可以通过插件 vuex-persistedstate 使内容修改后就保存到本地防止丢失
具体用法可查看 https://blog.csdn.net/qq_54527592/article/details/122378328?spm=1001.2014.3001.5502

参考 https://vuex.vuejs.org/zh/