Vuex使用方法，state,matations,actions,getters的使用规则

目录

1.Vuex基础

2.Vuex核心

state状态：

给仓库提供数据

使用数据方法：

通过store直接访问

通过辅助函数

matations

提供方法（state 状态 num 参数）

调用方法

页面中直接调用

通过辅助函数

actions处理异步

提供方法

调用方法

页面中 dispatch 调用

通过辅助函数

getters（类似于计算属性）

提供计算方法

调用方法

页面中直接调用

通过辅助函数

module模块

初始化

state

matations

actions

getters

---

---

1.Vuex基础

1.安装vuex

yarn add vuex@3  //vue2 使用vuex3版本

2.在src下新建/strore/index.js

3.创建仓库

/strore/index.js

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

Vue.use(vuex)

const store = new vuex.Store({
  state: {
    count: 100
  }
})

export default store

4.导入挂载

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/index' //导入仓库

Vue.config.productionTip = false

new Vue({
  router,
  store,                         //挂载到vue实例上
  render: h => h(App)
}).$mount('#app')

2.Vuex核心

state状态：

给仓库提供数据

const store = new vuex.Store({
  state: {
    count: 100
  }
})

使用数据方法：

通过store直接访问

(1)模板中： {{ $store.state.xxx }}

//设置son1的模版
<template>
  <div class="son1">
{{$store.state.count}}
  </div>
</template>

展示效果：

(2)组件逻辑中： this.$store.state.xxx

 data () {
    return {
      count: this.$store.state.count
    }
  }

<template>
  <div class="son1">
  <div>{{$store.state.count}}</div>
  <div>{{ count }}</div>
  </div>
</template>

展示效果：

(3)JS模块中： store.state.xxx

main.js

import store from './store/index'
console.log(store.state.count)

展示效果

通过辅助函数

mapState

(1)引入mapState

import { mapState } from 'vuex'

(2)自动映射到计算属性中

  computed: {
    ...mapState(['count'])
  }

使用方式与计算属性使用方法相同，在模版中使用{{count}}即可渲染到页面。

展示效果：

matations

(state数据的修改只能通过 mutations）在组件中不能修改仓库中数据，只能调用mutations中的方法来改变数据

提供方法（state 状态 num 参数）

 mutations: {
    addCount (state, num) {
      state.count += num
    }
  }

调用方法

页面中直接调用

<button @click="add(1)">点击加1</button>
<button @click="add(5)">点击加5</button> 
methods: {
    add (num) {
      this.$store.commit('addCount', num)
    }
  }

注意：页面中直接调用只能传一个参数，如果要传多个数据建议使用数组或对象。

通过辅助函数

<button @click="addCount(1)">点击加1</button>

import { mapMutations} from 'vuex'
methods: {
    ...mapMutations(['addCount'])
  }

通过辅助函数就可以直接调用函数例如：<button @click="addCount(1)">点击加1</button>

actions处理异步

提供方法

  mutations: {
    changeCount (state, num) {
      state.count = num
    }
  },
actions: {
    setAsyncCount (context, num) {
      setTimeout(() => {
        context.commit('changeCount', num)
      }, 1000)
    }
  }

调用方法

页面中 dispatch 调用

<button @click="setCount(200)">一秒变200</button>
  
methods: {
    setCount (num) {
      this.$store.dispatch('setAsyncCount', num)
    }
  }

通过辅助函数

<button @click="setAsyncCount(300)">一秒变300</button>

import { mapActions } from 'vuex'
 methods: {
    ...mapActions(['setAsyncCount'])
  }

getters（类似于计算属性）

提供计算方法

 state: {
    list: [1, 2, 3, 43, 65, 67, 34, 23, 12, 4, 5, 78]
  },
 getters: {
    listFilter (state) {
      return state.list.filter(item => item > 10)
    }
  }

调用方法

页面中直接调用

<div>{{$store.getters.listFilter}}</div>

通过辅助函数

<div>{{ listFilter}}</div>
import { mapGetters } from 'vuex'
 computed: {
    ...mapGetters(['listFilter'])
  },

展示效果：

module模块

初始化

1.新建/src/store/modules/use.js

2.创建基本结构

src/store/modules/use.js

const state = {}
const mutations = {}
const actions = {}
const getters = {}
export default {
state,
mutations,
actions,
getters
}

3.在store中引入

import user from './modules/user'
const store = new Vuex.Store({
modules: {
user
}
})

state

const state = {
  username: 'zs'
}

调用方法

① 直接通过模块名访问 $store.state.模块名.xxx

<div>{{$store.state.user.username}}</div>

② 通过 mapState 映射

默认根级别的映射 mapState([ 'xxx' ])

子模块的映射 mapState('模块名', ['xxx']) - 需要开启命名空间

 方法一：

<div>{{ user.username}}</div>

import { mapState } from 'vuex'  
computed: {
    ...mapState(['user'])
  },

方法二：

<div>{{ username}}</div>

import { mapState } from 'vuex'
 computed: {
    ...mapState('user', ['username'])
  },

matations

const mutations = {
  setUsername (state, e) {
    state.username = e
  }
}

注意：默认模块中的 mutation 和 actions 会被挂载到全局，需要开启命名空间，才会挂载到子模块。

export default {
  namespaced: true,  //开启命名空间
  state,
  mutations,
  actions,
  getters
}

调用子模块中 mutation：

① 直接通过 store 调用 $store.commit('模块名/xxx ', 额外参数)

<input type="text" :value="$store.state.user.username" @input="Updata"/> 
methods: {
    Updata (e) {
      this.$store.commit('user/setUsername', e.target.value)
    }
  }

② 通过 mapMutations 映射

默认根级别的映射 mapMutations([ 'xxx' ])

子模块的映射 mapMutations('模块名', ['xxx']) - 需要开启命名空间

<input type="text" :value="$store.state.user.username" @input="updata"> 
import { mapMutations } from 'vuex'
 methods: {
    ...mapMutations('user', ['setUsername']),
    updata (e) {
      this.setUsername(e.target.value)
    }
  }
}

actions

const actions = {
  setUsername1 (context, name1) {
    setTimeout(() => {
      context.commit('setUsername', name1)
    }, 1000)
  }
}

调用子模块中 action ：

① 直接通过 store 调用 $store.dispatch('模块名/xxx ', 额外参数)

<input type="text" @keyup.enter="UpdataUsername">回车后一秒更改数据
 UpdataUsername (e) {
      this.$store.dispatch('user/setUsername1', e.target.value)
      console.log(e.target.value)
    }

② 通过 mapActions 映射 默认根级别的映射 mapActions([ 'xxx' ]) 子模块的映射 mapActions('模块名', ['xxx']) - 需要开启命名空间

<input type="text" @keyup.enter="UpdataUsername">回车后一秒更改数
import { mapActions } from 'vuex'
methods: {
    ...mapActions('user', ['setUsername1']),
    UpdataUsername (e) {
      this.setUsername1(e.target.value)
    },
  }

getters

const state = {
  list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
}
const getters = {
  ListFilter (state) {
    return state.list.filter(item => item > 5)
  }
}

使用模块中 getters 中的数据：

① 直接通过模块名访问 $store.getters['模块名/xxx ']

<div>{{ $store.getters['user/ListFilter']}}</div>

② 通过 mapGetters 映射

默认根级别的映射 mapGetters([ 'xxx' ])

子模块的映射 mapGetters('模块名', ['xxx']) - 需要开启命名空间

<div>{{ ListFilter}}</div>
import { mapGetters } from 'vuex'
 computed: {
    ...mapGetters('user', ['ListFilter'])
  },