Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能
这个状态自管理应用包含以下几个部分：
state，驱动应用的数据源；
view，以声明方式将 state 映射到视图；
actions，响应在 view 上的用户输入导致的状态变化。
以下是一个表示“单向数据流”理念的简单示意：
image.png
image.png
发送方法|接收方法
方式一：
| 部门 | 发送方法 | 接收方法 |
|---|---|---|
| getters(数据筛选) | computed通过辅助函数进行混入 ...getters(['名称', '名称']) | this.'名称'或{{名称}} |
| mutations(同步) | this.$store.commit('方法名', data) | 方法名 =>(state, payload.data) |
| mutations(同步) | this.$store.commit('方法名', data) | 方法名 =>(state, data) |
| actions(异步) | this.$store.dispatch('方法名', data) | 方法名 =>(context, data) |
| actions(异步) | this.$store.dispatch('方法名', 对象) | 方法名 =>(context, 对象) |
重点
把state、getters、mutations、actions、moudle进行抽取方便维护管理
方式二：辅助函数进行混入
以下是案例展示
image.png
<template>
<view>
<text>{{getCounter}}</text>
<template v-for="(item, index) in getList">
<view>{{item.name}} {{item.age}}</view>
</template>
<button @tap="handlerCounter">修改counter</button>
<button @tap="handlerPersin">修改Person</button>
</view>
</template>
<script>
import {mapState, mapGetters, mapMutations, mapActions} from 'vuex'
import {ADD_COUNTER, UPDATE_PERSON} from '../../store/moudleA/moudlA-type.js'
export default {
data(){
return {
}
},
computed:{
...mapState(['counter']),
...mapGetters(['getCounter', 'getList'])
},
methods: {
...mapMutations([ADD_COUNTER]),
...mapActions(['upDatePerson']),
handlerCounter(){
this.ADD_COUNTER({num: 2})
},
handlerPersin(){
this.upDatePerson('张三').then( res => {
uni.showToast({
title: '修改成功'
})
})
}
}
}
</script>
<style>
</style>
index.js文件（ ）
import Vue from "vue"
import Vuex from 'vuex'
Vue.use(Vuex)
import moudleA from './moudleA/moudleA.js'
const store = new Vuex.Store({
modules:{
moudleA
}
})
export default store
actions.js文件 （）
import {UPDATE_PERSON} from "./moudlA-type.js"
export default{
//更具名称修改年龄
upDatePerson: (content, name) => {
content.commit(UPDATE_PERSON,{
name: name,
age: 80
})
}
}
getters.js （）
export default{
getCounter: (state, getter) => { //获取counter
return state.counter
},
getList: (state, getter) =>{ //获取学生数据
return state.student
}
}
moutations.js文件（ ）
//抽取成常量，是为了不会写错方法名称，避免一些低级错误
import {ADD_COUNTER, UPDATE_PERSON} from "./moudlA-type.js"
export default{
[ADD_COUNTER]: (state, payload) => { //对counter进行增加
return state.counter += payload.num
},
[UPDATE_PERSON]: (state, payload) =>{ //根据名称修改年龄
return new Promise((resolve, reject) => {
let isUpdate = false
for (var i = 0; i < state.student.length; i++) {
let item = state.student[i]
if(item.name === payload.name){
item.age += payload.age
isUpdate = true
break
}
}
if(isUpdate){
resolve(true)
}else{
reject(false)
}
})
}
}
moudleA-type.js文件()
export const ADD_COUNTER = 'ADD_COUNTER' //counter增加
export const UPDATE_PERSON = 'UPDATE_PERSON' //根据名称修改年龄
moudleA.js文件
import getters from './getters.js'
import mutations from './mutations.js'
import actions from './actions.js'
const state = {
counter: 1000,
student: [
{
id: 1,
name: '张三',
age: 10
},
{
id: 2,
name: '李四',
age: 11
},
{
id: 3,
name: '王五',
age: 12
},
]
}
export default{
state,
getters,
mutations,
actions
}
在main.js文件里面进行挂载
import Vue from 'vue'
import App from './App'
import store from './store/index.js'
Vue.prototype.$store = store
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
store,
...App
})
app.$mount()
注：哪里有写的不对的地方，请朋友给与指点
网友评论