vuex的学习笔记（uni app）1

学习目标：

• 一周掌握 vuex入门知识

---

学习内容：

1.Vuex 是实现组件状态（数据）管理的一种机制，可以方便实现组件之间的数据共享，即把需要共享的数据存放在vuex中。
2.安装vuex依赖包
3.导入vuex包
4.创建store对象

在 uni-app 项目根目录下，新建 store 目录，在此目录下新建 index.js 文件。在 index.js 文件配置如下

import App from './App'

// #ifndef VUE3
import Vue from 'vue'
import store from './store'

Vue.prototype.$store = store

Vue.config.productionTip = false

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

// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  return {
    app
  }
}
// #endif

在main.js 中导入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()

5.将store对象挂载到vue实例中

获取store数据

<template>
	<view class="content">
		<text> 用户名:{{username}}</text>
		<text>年龄:{{age}}</text>
		</view>
	</view>
</template>

第一种方法：通过属性访问，需要在根节点注入 store

<script>
	import store from '@/store/index.js';//需要引入store
	export default {
		data() {
			return {}
		},
		computed: {
			username() {
				return store.state.username 
			}
		}
	}
</script>

第二种方法：在组件中使用，通过 this.$store 访问到 state 里的数据

<script>
	export default {
		data() {
			return {}
		},
		computed: {
			username() {
				return this.$store.state.username 
			}
		}
	}
</script>

---

第三种方法：通过mapState辅助函数帮忙生成计算属性

<script>
	import { mapState } from 'vuex'//引入mapState
	export default {
		data() {
			return {}
		},
		computed: mapState({
		    // 从state中拿到数据 箭头函数可使代码更简练
		    username: state => state.username,
			age: state => state.age,
		}) 
	}
</script>

5.为了能够使用 this 获取组件自己的data数据，必须使用常规函数

<template>
	<view>
		<view>用户名：{{username}}</view>
		<view>年龄：{{age}}</view>
	</view>
</template>
<script>
	import { mapState } from 'vuex'//引入mapState
	export default {
		data() {
			return {
				firstName:"Li"
			}
		},	
		computed: {
			...mapState({
				username: function (state) {
				    return this.firstName 
				},
				age: state => state.age,
			})
		},
	}
</script>