基于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/