https://vuex.vuejs.org/zh/guide/
| vuex核心函数 | vue的使用 | 关键使用 |
|---|---|---|
| state | computed |
...mapstate（对象操作符号） |
| getter | computed |
...mapGetters(辅助操作符) |
| mutation | method |
commit提交，同步，使用常量替代函数名称 |
| action | method |
dispatch提交 ...mapAction 辅助函数 |
| module | 无 |
mutations的使用
mutations的使用比较特殊，不能通过mutation直接调用，需要通过commit方法，并且mutations中是使用同步调用，举例来说，如果需要修改count的之可以直接通过this.$store.commit(this.$store.state.count ++'),
但是对于多个地方修改同一个值的时候，会让人不知道为什么修改，这个是可以通过this.$store.commit('increment')修改，相当于增加了给代码增加了注解。官方不推荐直接修改，同构increment相当于动态变化跟踪，利于代码的阅读，
const store = new Vuex.Store({
state :{
count:0
},
mutations:{
increment(state){
state.count++
},
decrement(state){
state.count--
}
}
})
- 使用对象提交
add() {
this.$store.commit('increment', {data:1})
},
//store.js
increment(state,n){
state.count +=n.data
},
- 使用常量替换操作类型(调用方法)
//store/index.js
import {MUTATION_TYPE} from '../util/mutations-constant'
mutations: {
[MUTATION_TYPE](state,n) {
state.count += n.data
},
}
//Next.vue
import {MUTATION_TYPE} from '../util/mutations-constant'
add() {
this.$store.commit(MUTATION_TYPE,{data:1})
},
'mapState'使用
如果一个组件有多个状态，组件的状态存放在store种，可以通过mapState来监听变化（当然可以通过计算属性，但是官方说的是计算属性有些冗余）
官方例子
// store/index.js
const store = new Vuex.Store({
state :{
count:0
},
mutations:{
increment(state){
state.count++
},
decrement(state){
state.count--
}
}
})
export default store
//next.vue
<template>
<p>
{{count}}
{{countAlias}}
{{countPlusLocalState}}
</p>
</template>
export default {
data() {
return {
localData: 10
}
},
name: "Next",
computed: mapState({
count: state => state.count, //1
countAlias: 'count', //2
countPlusLocalState(state) { //3
return state.count + this.localData
}
}),
}
1和2都是在组件种声明一个属性，对应的是store种的state，3是定义的一个常规函数,用来和本地数据计算计算。
对象操作运算符（我的理解是更加方便的写法，更容易阅读代码）,可以让它与局部计算属性混合使用
computed: {
//本地的其他一些计算方法
...mapState({
count: state => state.count
})
},
getters函数的使用：根据某些条件过滤掉数组，例如购物车中有许多商品，最终结算的时候要剔除掉那些用户没有勾选的商品，而getters的左右是在store中过滤掉，避免在多个页面写重复逻辑。
// /stoe/index.js
const store = new Vuex.Store({
state: {
todos: [
{id: 1, text: '...', done: true},
{id: 2, text: '...', done: false}
]
},
getters:{
doneTools :state => {
return state.todos.filter(todo => todo.done)
}
}
})
使用
// /Next.Vue
methods: {
getTodos() {
console.log(this.$store.getters.doneTools)
}
}
getter中的方法可以相互调用，类似java中的重载(也不一定是重载，就是a方法可以调用b方法)
getters:{
doneTools :state => {
return state.todos.filter(todo => todo.done)
}，
tododoneTools(state,getter){
return getter.doneTools
}
}
getter方法的可以传参，使用getters 根据id 查找数组中的元素
// /store/index.js
getters:{
doneToolsId: state => (id) =>{
return state.todos.find(todo => todo.id == id)
}
}
mapGetters的使用是将store中的属性映射到局部属性中
// Next.vue
<template>
<div>
<button @click="getTodos">
{{doneToolsCount}}
</button>
</div>
</template>
import {mapState,mapGetters} from 'vuex'
export default{
name: "Next",
computed:{
... mapGetters({
'doneToolsCount' //映射的 `/store/index.js`下的`getters`的`doneToolsCount`
})
}
}
action action其实调用的就是mutation,为什么不直接调用mutation,因为mutation必须同步执行。而action 内部可以执行异步操作
-
action通过参数解构来调用mutation
//store/index.js
import {MUTATION_TYPE} from '../util/mutations-constant'
mutations: {
[MUTATION_TYPE](state,n) {
state.count += n.data
},
reduce: (state, n) => {
state.count -= n
}
}
,
actions:{
add({commit},n){
commit(MUTATION_TYPE,n)
}
}
//Next.vue
add(){
this.$store.dispatch(add,{data:1})
},
// store/index.js
},
mutations: {
[MUTATION_TYPE](state) {
state.count += 10
}
},
actions: {
[MUTATION_TYPE](context) {
context.commit(MUTATION_TYPE)
}
}
// Next.vue
methods: {
getTodos() {
this.$store.dispatch(MUTATION_TYPE)
}
}
modules可以不同模块定义不同的store，例如登陆，购物车
// store/index.js
const moduleLogin = {
state: {
username:"aaa",
psw:'1111'
},
}
const muduelCar = {
state: {
count:0,
sumprice:0
},
}
const store = new Vuex.Store({
modules: {
a: moduleLogin,
b: muduelCar,
}
})
export default store
//使用 Next.vue
<button @click="getTodos">
10
</button>
methods: {
getTodos() {
console.log(this.$store.state.a. username)
}
}
