009 uni-app之vue、vuex

vue.js 视频教程

vue3.js 中文官网

vue.js 视频教程 讲解的比较详细

vue语法：https://uniapp.dcloud.net.cn/tutorial/vue-vuex.html
表格实现
vue2迁移到 vue3：https://uniapp.dcloud.net.cn/tutorial/migration-to-vue3.html

演练场

Pinia

符合直觉的
Vue.js 状态管理库
类型安全、可扩展性以及模块化设计。
甚至让你忘记正在使用的是一个状态库。
https://pinia.vuejs.org/zh/

Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

状态管理有5个核心

每一个 Vuex 应用的核心就是 store（仓库），它包含着你的应用中大部分的状态 (state)。

状态管理有5个核心：state、getter、mutation、action、module。

mapState、mapGetters、mapMutations、mapActions

import

// 页面路径：store/index.js 
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);//vue的插件机制

//Vuex.Store 构造器选项
const store = new Vuex.Store({
	state:{//存放状态
		"username":"foo",
		"age":18
	}
})
export default store

// 页面路径：main.js
import Vue from 'vue'
import App from './App'
import store from './store'

Vue.prototype.$store = store

// 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
const app = new Vue({
	store,
	...App
})
app.$mount()

<!-- 页面路径：pages/index/index.vue -->
<template>
	<view>
		<text>用户名：{{username}}</text>
	</view>
</template>
<script>
	import store from '@/store/index.js';//需要引入store
	export default {
		data() {
			return {}
		},
		computed: {
			username() {
				return store.state.username 
			}
		}
	}
</script>

三种访问方式：

computed: {
			username() {
				return store.state.username 
			}
		}

computed: {
			username() {
				return this.$store.state.username 
			}
		}

computed: mapState({
		    // 从state中拿到数据 箭头函数可使代码更简练
		    username: state => state.username,
			age: state => state.age,
		}) 

Getter

getters: {
		doneTodos: state => {
			return state.todos.filter(todo => todo.done)
		}
	}

Mutation

• Vuex中store数据改变的唯一方法就是mutation
• Mutation 必须是同步函数

mutations: {
		add(state) {
			// 变更状态
			state.count += 2
		}
	}
methods: {
		addCount() {
			store.commit('add')
		}
	}

action

• action 提交的是 mutation，通过 mutation 来改变 state ，而不是直接变更状态。
• action 可以包含任意异步操作。
• action 可以执行任意的同步和异步操作

actions:{
		addCountAction (context) {
		    context.commit('add')
		}
	}

分发 Action:
actions 通过 store.dispatch 方法触发。

methods: {
			add () {
				store.dispatch('addCountAction')
			}
		}

actions 支持以载荷形式分发:

actions:{
		addCountAction (context , payload) {
		    context.commit('add',payload)
		}
	}

Module

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

├── components             # 组件文件夹
    └── myButton 
        └── myButton.vue   # myButton组件
├── pages
    └── index 
	    └── index.vue      # index页面
├── static
├── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    └── modules           # 模块文件夹
        ├── moduleA.js    # 模块moduleA
        └── moduleB.js    # 模块moduleB
├── App.vue
├── main.js
├── manifest.json
├── pages.json
└── uni.scss

	//  页面路径：store/index.js
	import Vue from 'vue'
	import Vuex from 'vuex'

	import moduleA from '@/store/modules/moduleA'
	import moduleB from '@/store/modules/moduleB'

	Vue.use(Vuex)
	export default new Vuex.Store({
		modules:{
			moduleA,moduleB
		}
	})