• Vue（八）——Vuex

    目录

    理解vuex

    求和案例

    纯vue版

    搭建vuex环境

    vuex版

    getters配置项

    四个Map方法的使用

    mapState与mapGetters

    mapMutations与mapActions

    多组件共享数据

    vuex模块化编码

    理解vuex

    概念：

            在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态（数据）进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

    多组件共享数据——全局事件总线实现（让所有组件都可以读写x和y）

    多组件共享数据——vuex实现

    什么时候使用vuex？

    1.多个组件依赖于同一状态（数据）
    2.来自不同组件的行为需要变更同一状态（数据）

    工作原理图：

            我们所说的将数据交给vuex去管理，就是交给State对象去管理。这个actions主要处理mounted，向服务器发异步请求，然后获取数据，修改，保存到state仓库中，然后通过mapState组件能拿到，然后进行遍历数组动态展示数据，这就是前台项目的大部分功能。

    1.A M S 都是对象

    2.A M S都要经过store的领导

    3.需要在任何一个组件里调dispatch、commit，而dispatch、commit都在store身上。这就需要所有的组件实例对象vc都能看见store。

    求和案例

    纯vue版

    option里的值如果不处理会被当成字符串而无法进行运算

    Count.vue

    1. <template>
    2. 	<div>
    3. 		<h1>当前求和为：{{sum}}h1>
    4. 		<select v-model.number="n">
    5. 			<option value="1">1option>
    6. 			<option value="2">2option>
    7. 			<option value="3">3option>
    8. 		select>
    9. 		<button @click="increment">+button>
    10. 		<button @click="decrement">-button>
    11. 		<button @click="incrementOdd">当前求和为奇数再加button>
    12. 		<button @click="incrementWait">等一等再加button>
    13. 	div>
    14. template>
    15.  
    16. <script>
    17. 	export default {
    18. 		name:'Count',
    19. 		data() {
    20. 			return {
    21. 				n:1, //用户选择的数字
    22. 				sum:0 //当前的和
    23. 			}
    24. 		},
    25. 		methods: {
    26. 			increment(){
    27. 				this.sum += this.n
    28. 			},
    29. 			decrement(){
    30. 				this.sum -= this.n
    31. 			},
    32. 			incrementOdd(){
    33. 				if(this.sum % 2){
    34. 					this.sum += this.n
    35. 				}
    36. 			},
    37. 			incrementWait(){
    38. 				setTimeout(()=>{
    39. 					this.sum += this.n
    40. 				},500)
    41. 			},
    42. 		},
    43. 	}
    44. script>
    45.  
    46. <style lang="css">
    47. 	button{
    48. 		margin-left: 5px;
    49. 	}
    50. style>

    App.vue

    1. <template>
    2. 	<div>
    3. 		<Count/>
    4. 	div>
    5. template>
    6.  
    7. <script>
    8. 	import Count from './components/Count'
    9. 	export default {
    10. 		name:'App',
    11. 		components:{Count},
    12. 	}
    13. script>

    main.js

    1. //引入Vue
    2. import Vue from 'vue'
    3. //引入App
    4. import App from './App.vue'
    5. //引入插件
    6. import vueResource from 'vue-resource'
    7. //关闭Vue的生产提示
    8. Vue.config.productionTip = false
    9. //使用插件
    10. Vue.use(vueResource)
    11.  
    12. //创建vm
    13. new Vue({
    14. 	el:'#app',
    15. 	render: h => h(App),
    16. 	beforeCreate() {
    17. 		Vue.prototype.$bus = this
    18. 	}
    19. })

    搭建vuex环境

    1. 下载 Vuex：npm i vuex（npm i vuex@3）

    让所有的vc和vm都有一个store

    没引入vuex之前，vue是不认识store的

    引入vuex之后，vue就认识这个store了。

    App的组件实例对象也有store

    2.创建src/store/index.js： 

    该文件用于创建Vuex中最为核心的store（根据原理图，store需包含actions、mutations、state）

    1. //引入Vue核心库
    2. import Vue from 'vue'
    3. //引入Vuex
    4. import Vuex from 'vuex'
    5. //应用Vuex插件
    6. Vue.use(Vuex)
    7.    
    8. //准备actions对象——响应组件中用户的动作、处理业务逻辑
    9. const actions = {}
    10. //准备mutations对象——修改state中的数据
    11. const mutations = {}
    12. //准备state对象——保存具体的数据
    13. const state = {}
    14.  
    15. //创建并暴露store
    16. export default new Vuex.Store({
    17.     //key和value重名了可以触发简写形式
    18. 	actions,
    19. 	mutations,
    20. 	state,
    21. })

    3.在src/main.js中创建 vm 时传入store配置项：

    1. import Vue from 'vue'
    2. import App from './App.vue'
    3. import Vuex from 'vuex'
    4. //引入store
    5. import store from './store'
    6.  
    7. Vue.config.productionTip = false
    8.  
    9. Vue.use(Vuex)
    10.  
    11. new Vue({
    12.     el:"#app",
    13.     render: h => h(App),
    14.     store
    15. })

    vuex版

    ./components/Count.vue

    1. <template>
    2. 	<div>
    3. 		<h1>当前求和为：{{$store.state.sum}}h1>
    4. 		<select v-model.number="n">
    5. 			<option value="1">1option>
    6. 			<option value="2">2option>
    7. 			<option value="3">3option>
    8. 		select>
    9. 		<button @click="increment">+button>
    10. 		<button @click="decrement">-button>
    11. 		<button @click="incrementOdd">当前求和为奇数再加button>
    12. 		<button @click="incrementWait">等一等再加button>
    13. 	div>
    14. template>
    15.  
    16. <script>
    17. 	export default {
    18. 		name:'Count',
    19. 		data() {
    20. 			return {
    21. 				n:1, //用户选择的数字
    22. 			}
    23. 		},
    24. 		methods: {
    25. 			increment(){
    26.                 //可直接commit给mutations
    27. 				this.$store.commit('JIA',this.n)
    28. 			},
    29. 			decrement(){
    30.                 //可直接commit给mutations
    31. 				this.$store.commit('JIAN',this.n)
    32. 			},
    33. 			incrementOdd(){
    34.                 //dispatch到actions
    35. 				this.$store.dispatch('jiaOdd',this.n)
    36. 			},
    37. 			incrementWait(){
    38. 				this.$store.dispatch('jiaWait',this.n)
    39. 			},
    40. 		},
    41. 		mounted() {
    42. 			console.log('Count',this)
    43. 		},
    44. 	}
    45. script>
    46.  
    47. <style lang="css">
    48. 	button{
    49. 		margin-left: 5px;
    50. 	}
    51. style>

     

    ./store/index.js

    1. //该文件用于创建Vuex中最为核心的store
    2. import Vue from 'vue'
    3. //引入Vuex
    4. import Vuex from 'vuex'
    5. //应用Vuex插件
    6. Vue.use(Vuex)
    7.  
    8. //准备actions——用于响应组件中的动作
    9. const actions = {
    10. 	/* jia(context,value){
    11.         //参数1是上下文对象，里面包含了可能用到的方法（例如commit），参数2是所传过来的参数值
    12. 		console.log('actions中的jia被调用了')
    13. 		context.commit('JIA',value)
    14. 	},
    15. 	jian(context,value){
    16. 		console.log('actions中的jian被调用了')
    17. 		context.commit('JIAN',value)
    18. 	}, */
    19. 	jiaOdd(context,value){
    20. 		console.log('actions中的jiaOdd被调用了')
    21. 		if(context.state.sum % 2){
    22. 			context.commit('JIA',value)
    23. 		}
    24. 	},
    25. 	jiaWait(context,value){
    26. 		console.log('actions中的jiaWait被调用了')
    27. 		setTimeout(()=>{
    28. 			context.commit('JIA',value)
    29. 		},500)
    30. 	}
    31. }
    32. //准备mutations——用于操作数据（state）
    33. const mutations = {
    34. 	JIA(state,value){
    35. 		console.log('mutations中的JIA被调用了')
    36. 		state.sum += value
    37. 	},
    38. 	JIAN(state,value){
    39. 		console.log('mutations中的JIAN被调用了')
    40. 		state.sum -= value
    41. 	}
    42. }
    43. //准备state——用于存储数据
    44. const state = {
    45. 	sum:0 //当前的和
    46. }
    47.  
    48. //创建并暴露store
    49. export default new Vuex.Store({
    50. 	actions,
    51. 	mutations,
    52. 	state,
    53. })

    参数中的state

    App.vue

    1. <template>
    2. 	<div>
    3. 		<Count/>
    4. 	div>
    5. template>
    6.  
    7. <script>
    8. 	import Count from './components/Count'
    9. 	export default {
    10. 		name:'App',
    11. 		components:{Count},
    12. 		mounted() {
    13. 			// console.log('App',this)
    14. 		},
    15. 	}
    16. script>

    main.js

    1. //引入Vue
    2. import Vue from 'vue'
    3. //引入App
    4. import App from './App.vue'
    5. //引入插件
    6. import vueResource from 'vue-resource'
    7. //引入store
    8. import store from './store'
    9.  
    10. //关闭Vue的生产提示
    11. Vue.config.productionTip = false
    12. //使用插件
    13. Vue.use(vueResource)
    14.  
    15. //创建vm
    16. new Vue({
    17. 	el:'#app',
    18. 	render: h => h(App),
    19. 	store, 
    20. 	beforeCreate() {
    21. 		Vue.prototype.$bus = this
    22. 	}
    23. })

    使用步骤：

    1.初始化数据、配置```actions```、配置```mutations```，操作文件```store.js```

    1. //引入Vue核心库
    2.    import Vue from 'vue'
    3.    //引入Vuex
    4.    import Vuex from 'vuex'
    5.    //引用Vuex
    6.    Vue.use(Vuex)
    7.    
    8.    const actions = {
    9.        //响应组件中加的动作
    10.    	jia(context,value){
    11.    		// console.log('actions中的jia被调用了',miniStore,value)
    12.    		context.commit('JIA',value)//大写为mutations中的方法
    13.    	},
    14.    }
    15.    
    16.    const mutations = {
    17.        //执行加
    18.    	JIA(state,value){
    19.    		// console.log('mutations中的JIA被调用了',state,value)
    20.    		state.sum += value
    21.    	}
    22.    }
    23.    
    24.    //初始化数据
    25.    const state = {
    26.       sum:0
    27.    }
    28.    
    29.    //创建并暴露store
    30.    export default new Vuex.Store({
    31.    	actions,
    32.    	mutations,
    33.    	state,
    34.    })

    2.组件中读取vuex中的数据：```$store.state.sum```

    3.组件中修改vuex中的数据：

    ```$store.dispatch('action中的方法名',数据)``` 或 ```$store.commit('mutations中的方法名',数据)```

    vuex开发者工具的使用

    页面所呈现的数据一定是绿色条所在的数据

    每一条后面三个按钮的作用

    getters配置项

    1. 概念：当state中的数据需要经过加工后再使用时，可以使用getters加工

    求和案例

    提出需求如下：

    index.js中添加getters配置项，别忘了在store里配置进去getters

    读取getters的返回值数据

    1.概念：当state中的数据需要经过加工后再使用时，可以使用getters加工

    2.在store.js中追加getters配置

    1. ...
    2. const getters = {
    3. 	bigSum(state){
    4. 		return state.sum * 10
    5. 	}
    6. }
    7.  
    8. //创建并暴露store
    9. export default new Vuex.Store({
    10. 	...
    11. 	getters
    12. })
    3.组件中读取数据： $store.getters.bigSum

    四个Map方法的使用

    往state中添加两个数据

    在组件中引入

    效果

    问题：当使用vuex中很多数据时，就会重复使用这些

    1.靠程序员自己亲自去写计算属性

    mapState与mapGetters

    看一下mapState干了什么活

    在数组写法当中一个sum干了两件事，1.作为计算属性   2.寻找state当中的值

    如果要用数组写法，那么计算属性的名和读取出来的名要一致。

    ./components/Count.vue

    1. <template>
    2. 	<div>
    3. 		<h1>当前求和为：{{sum}}h1>
    4. 		<h3>当前求和放大10倍为：{{bigSum}}h3>
    5. 		<h3>我在{{school}}，学习{{subject}}h3>
    6. 		<select v-model.number="n">
    7. 			<option value="1">1option>
    8. 			<option value="2">2option>
    9. 			<option value="3">3option>
    10. 		select>
    11. 		<button @click="increment">+button>
    12. 		<button @click="decrement">-button>
    13. 		<button @click="incrementOdd">当前求和为奇数再加button>
    14. 		<button @click="incrementWait">等一等再加button>
    15. 	div>
    16. template>
    17.  
    18. <script>
    19. 	import {mapState,mapGetters} from 'vuex'
    20. 	export default {
    21. 		name:'Count',
    22. 		data() {
    23. 			return {
    24. 				n:1, //用户选择的数字
    25. 			}
    26. 		},
    27. 		computed:{
    28. 			//靠程序员自己亲自去写计算属性
    29. 			/* sum(){
    30. 				return this.$store.state.sum
    31. 			},
    32. 			school(){
    33. 				return this.$store.state.school
    34. 			},
    35. 			subject(){
    36. 				return this.$store.state.subject
    37. 			}, */
    38.  
    39. 			//借助mapState生成计算属性，从state中读取数据。（对象写法）
    40. 			// ...mapState({he:'sum',xuexiao:'school',xueke:'subject'}),
    41.  
    42. 			//借助mapState生成计算属性，从state中读取数据。（数组写法）
    43. 			...mapState(['sum','school','subject']),
    44.  
    45. 			/* ******************************************************************** */
    46.  
    47. 			/* bigSum(){
    48. 				return this.$store.getters.bigSum
    49. 			}, */
    50.  
    51. 			//借助mapGetters生成计算属性，从getters中读取数据。（对象写法）
    52. 			// ...mapGetters({bigSum:'bigSum'})
    53. 			
    54. 			//借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
    55. 			...mapGetters(['bigSum'])
    56.  
    57. 		},
    58. 		methods: {
    59. 			increment(){
    60. 				this.$store.commit('JIA',this.n)
    61. 			},
    62. 			decrement(){
    63. 				this.$store.commit('JIAN',this.n)
    64. 			},
    65. 			incrementOdd(){
    66. 				this.$store.dispatch('jiaOdd',this.n)
    67. 			},
    68. 			incrementWait(){
    69. 				this.$store.dispatch('jiaWait',this.n)
    70. 			},
    71. 		},
    72. 		mounted() {
    73. 			const x = mapState({he:'sum',xuexiao:'school',xueke:'subject'})
    74. 			console.log(x)
    75. 		},
    76. 	}
    77. script>
    78.  
    79. <style lang="css">
    80. 	button{
    81. 		margin-left: 5px;
    82. 	}
    83. style>

    1.mapState方法：用于帮助我们映射state中的数据

    1. computed: {
    2.     //借助mapState生成计算属性：sum、school、subject（对象写法）
    3.      ...mapState({sum:'sum',school:'school',subject:'subject'}),
    4.          
    5.     //借助mapState生成计算属性：sum、school、subject（数组写法）
    6.     ...mapState(['sum','school','subject']),
    7. },

    2.mapGetters方法：用于帮助我们映射getters中的数据

    1. computed: {
    2.     //借助mapGetters生成计算属性：bigSum（对象写法）
    3.     ...mapGetters({bigSum:'bigSum'}),
    4.  
    5.     //借助mapGetters生成计算属性：bigSum（数组写法）
    6.     ...mapGetters(['bigSum'])
    7. },

    mapMutations与mapActions

    ./components/Count.vue

    1. <template>
    2. 	<div>
    3. 		<h1>当前求和为：{{sum}}h1>
    4. 		<h3>当前求和放大10倍为：{{bigSum}}h3>
    5. 		<h3>我在{{school}}，学习{{subject}}h3>
    6. 		<select v-model.number="n">
    7. 			<option value="1">1option>
    8. 			<option value="2">2option>
    9. 			<option value="3">3option>
    10. 		select>
    11. 		<button @click="increment(n)">+button>
    12. 		<button @click="decrement(n)">-button>
    13. 		<button @click="incrementOdd(n)">当前求和为奇数再加button>
    14. 		<button @click="incrementWait(n)">等一等再加button>
    15. 	div>
    16. template>
    17.  
    18. <script>
    19. 	import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
    20. 	export default {
    21. 		name:'Count',
    22. 		data() {
    23. 			return {
    24. 				n:1, //用户选择的数字
    25. 			}
    26. 		},
    27. 		computed:{
    28. 			//借助mapState生成计算属性，从state中读取数据。（对象写法）
    29. 			// ...mapState({he:'sum',xuexiao:'school',xueke:'subject'}),
    30.  
    31. 			//借助mapState生成计算属性，从state中读取数据。（数组写法）
    32. 			...mapState(['sum','school','subject']),
    33.  
    34. 			/* ******************************************************************** */
    35.  
    36. 			//借助mapGetters生成计算属性，从getters中读取数据。（对象写法）
    37. 			// ...mapGetters({bigSum:'bigSum'})
    38. 			
    39. 			//借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
    40. 			...mapGetters(['bigSum'])
    41.  
    42. 		},
    43. 		methods: {
    44. 			//程序员亲自写方法
    45. 			/* increment(){
    46. 				this.$store.commit('JIA',this.n)
    47. 			},
    48. 			decrement(){
    49. 				this.$store.commit('JIAN',this.n)
    50. 			}, */
    51.  
    52. 			//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
    53. 			...mapMutations({increment:'JIA',decrement:'JIAN'}),
    54.  
    55. 			//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(数组写法)
    56. 			// ...mapMutations(['JIA','JIAN']),  //需要使用
    57.  
    58. 			/* ************************************************* */
    59.  
    60. 			//程序员亲自写方法
    61. 			/* incrementOdd(){
    62. 				this.$store.dispatch('jiaOdd',this.n)
    63. 			},
    64. 			incrementWait(){
    65. 				this.$store.dispatch('jiaWait',this.n)
    66. 			}, */
    67.  
    68. 			//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
    69. 			...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
    70.  
    71. 			//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(数组写法)
    72. 			// ...mapActions(['jiaOdd','jiaWait'])
    73. 		},
    74. 		mounted() {
    75. 			const x = mapState({he:'sum',xuexiao:'school',xueke:'subject'})
    76. 			console.log(x)
    77. 		},
    78. 	}
    79. script>
    80.  
    81. <style lang="css">
    82. 	button{
    83. 		margin-left: 5px;
    84. 	}
    85. style>

            1.mapActions方法：用于帮助我们生成与actions对话的方法，即包含$store.dispatch(xxx)的函数。

    1. methods:{
    2.     //靠mapActions生成：incrementOdd、incrementWait（对象形式）
    3.     ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
    4.  
    5.     //靠mapActions生成：incrementOdd、incrementWait（数组形式）
    6.     ...mapActions(['jiaOdd','jiaWait'])
    7. }

            2.mapMutations方法：用于帮助我们生成与mutations对话的方法，即包含$store.commit(xxx)的函数。

    1. methods:{
    2.     //靠mapActions生成：increment、decrement（对象形式）
    3.     ...mapMutations({increment:'JIA',decrement:'JIAN'}),
    4.     
    5.     //靠mapMutations生成：JIA、JIAN（对象形式）
    6.     ...mapMutations(['JIA','JIAN']),
    7. }

            备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象（event）。

    多组件共享数据

    需求：一个数据，多个组件共享，在Count里读取personList人数，在Person里读取Count的和。

            index.js里state添加personList属性和值，并在mutations中添加ADD_PERSON方法使之能够给personList添加人。

    新建Person.vue并使用原始方法计算属性，其中可以使用state中的sum，并在template中展示。

    Count.vue使用map，其中可以添加personList，并在template中展示personList.length

    效果：

    src/components/Count.vue:

    1. <template>
    2. 	<div>
    3. 		<h1>当前求和为：{{sum}}h1>
    4. 		<h3>当前求和放大10倍为：{{bigSum}}h3>
    5. 		<h3>我在{{school}}，学习{{subject}}h3>
    6. 		<h3 style="color:red">Person组件的总人数是：{{personList.length}}h3>
    7. 		<select v-model.number="n">
    8. 			<option value="1">1option>
    9. 			<option value="2">2option>
    10. 			<option value="3">3option>
    11. 		select>
    12. 		<button @click="increment(n)">+button>
    13. 		<button @click="decrement(n)">-button>
    14. 		<button @click="incrementOdd(n)">当前求和为奇数再加button>
    15. 		<button @click="incrementWait(n)">等一等再加button>
    16. 	div>
    17. template>
    18.  
    19. <script>
    20. 	import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
    21. 	export default {
    22. 		name:'Count',
    23. 		data() {
    24. 			return {
    25. 				n:1, //用户选择的数字
    26. 			}
    27. 		},
    28. 		computed:{
    29. 			//借助mapState生成计算属性，从state中读取数据。（数组写法）
    30. 			...mapState(['sum','school','subject','personList']),
    31. 			//借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
    32. 			...mapGetters(['bigSum'])
    33. 		},
    34. 		methods: {
    35. 			//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
    36. 			...mapMutations({increment:'JIA',decrement:'JIAN'}),
    37. 			//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
    38. 			...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
    39. 		},
    40. 		mounted() {
    41. 			// const x = mapState({he:'sum',xuexiao:'school',xueke:'subject'})
    42. 			// console.log(x)
    43. 		},
    44. 	}
    45. script>
    46.  
    47. <style lang="css">
    48. 	button{
    49. 		margin-left: 5px;
    50. 	}
    51. style>

    src/components/Person.vue:

    1. <template>
    2. 	<div>
    3. 		<h1>人员列表h1>
    4. 		<h3 style="color:red">Count组件求和为：{{sum}}h3>
    5. 		<input type="text" placeholder="请输入名字" v-model="name">
    6. 		<button @click="add">添加button>
    7. 		<ul>
    8. 			<li v-for="p in personList" :key="p.id">{{p.name}}li>
    9. 		ul>
    10. 	div>
    11. template>
    12.  
    13. <script>
    14. 	import {nanoid} from 'nanoid'
    15. 	export default {
    16. 		name:'Person',
    17. 		data() {
    18. 			return {
    19. 				name:''
    20. 			}
    21. 		},
    22. 		computed:{
    23. 			personList(){
    24. 				return this.$store.state.personList
    25. 			},
    26. 			sum(){
    27. 				return this.$store.state.sum
    28. 			}
    29. 		},
    30. 		methods: {
    31. 			add(){
    32. 				const personObj = {id:nanoid(),name:this.name}
    33. 				this.$store.commit('ADD_PERSON',personObj)
    34. 				this.name = ''
    35. 			}
    36. 		},
    37. 	}
    38. script>

    src/store/index.js:

    1. //该文件用于创建Vuex中最为核心的store
    2. import Vue from 'vue'
    3. //引入Vuex
    4. import Vuex from 'vuex'
    5. //应用Vuex插件
    6. Vue.use(Vuex)
    7.  
    8. //准备actions——用于响应组件中的动作
    9. const actions = {
    10. 	/* jia(context,value){
    11. 		console.log('actions中的jia被调用了')
    12. 		context.commit('JIA',value)
    13. 	},
    14. 	jian(context,value){
    15. 		console.log('actions中的jian被调用了')
    16. 		context.commit('JIAN',value)
    17. 	}, */
    18. 	jiaOdd(context,value){
    19. 		console.log('actions中的jiaOdd被调用了')
    20. 		if(context.state.sum % 2){
    21. 			context.commit('JIA',value)
    22. 		}
    23. 	},
    24. 	jiaWait(context,value){
    25. 		console.log('actions中的jiaWait被调用了')
    26. 		setTimeout(()=>{
    27. 			context.commit('JIA',value)
    28. 		},500)
    29. 	}
    30. }
    31. //准备mutations——用于操作数据（state）
    32. const mutations = {
    33. 	JIA(state,value){
    34. 		console.log('mutations中的JIA被调用了')
    35. 		state.sum += value
    36. 	},
    37. 	JIAN(state,value){
    38. 		console.log('mutations中的JIAN被调用了')
    39. 		state.sum -= value
    40. 	},
    41. 	ADD_PERSON(state,value){
    42. 		console.log('mutations中的ADD_PERSON被调用了')
    43. 		state.personList.unshift(value)
    44. 	}
    45. }
    46. //准备state——用于存储数据
    47. const state = {
    48. 	sum:0, //当前的和
    49. 	school:'尚硅谷',
    50. 	subject:'前端',
    51. 	personList:[
    52. 		{id:'001',name:'张三'}
    53. 	]
    54. }
    55. //准备getters——用于将state中的数据进行加工
    56. const getters = {
    57. 	bigSum(state){
    58. 		return state.sum*10
    59. 	}
    60. }
    61.  
    62. //创建并暴露store
    63. export default new Vuex.Store({
    64. 	actions,
    65. 	mutations,
    66. 	state,
    67. 	getters
    68. })

     src/App.vue:

    1. <template>
    2. 	<div class="container">
    3. 		<Count/>
    4. 		<hr/>
    5. 		<Person/>
    6. 	div>
    7. template>
    8.  
    9. <script>
    10. 	import Count from './components/Count'
    11. 	import Person from './components/Person'
    12.  
    13. 	export default {
    14. 		name:'App',
    15. 		components:{Count,Person}
    16. 	}
    17. script>

    vuex模块化编码

    目录结构：

    1. 目的：让代码更好维护，让多种数据分类更加明确。

    2. 修改 store.js 

    1.    //count.js
    2.    const countAbout = {
    3.      namespaced:true,//开启命名空间
    4.      state:{x:1},
    5.      mutations: { ... },
    6.      actions: { ... },
    7.      getters: {
    8.        bigSum(state){
    9.           return state.sum * 10
    10.        }
    11.      }
    12.    }
    13.    export default countAbout
    14.  
    15.    //person.js
    16.    const personAbout = {
    17.      namespaced:true,//开启命名空间
    18.      state:{ ... },
    19.      mutations: { ... },
    20.      actions: { ... }
    21.    }
    22.    export default personAbout
    23.  
    24.    //index.js
    25.  
    26.    //该文件用于创建Vuex中最为核心的store
    27.    import Vue from 'vue'
    28.    //引入Vuex
    29.    import Vuex from 'vuex'
    30.    import countOptions from './count'
    31.    import personOptions from './person'
    32.    //应用Vuex插件
    33.    Vue.use(Vuex)
    34.    const store = new Vuex.Store({
    35.      modules: {
    36. 		//countAbout:countOptions,
    37. 		//personAbout:personOptions
    38.        countAbout,
    39.        personAbout
    40.      }
    41.    })
    42. export default store

    3. 开启命名空间后，组件中读取state数据：

    1. //方式一：自己直接读取
    2. this.$store.state.personAbout.list
    3. //方式二：借助mapState读取：
    4. ...mapState('countAbout',['sum','school','subject']),

    4. 开启命名空间后，组件中读取getters数据：

    1.    //方式一：自己直接读取
    2.    this.$store.getters['personAbout/firstPersonName']
    3.    //方式二：借助mapGetters读取：
    4.    ...mapGetters('countAbout',['bigSum'])

    5. 开启命名空间后，组件中调用dispatch

    1.    //方式一：自己直接dispatch
    2.    this.$store.dispatch('personAbout/addPersonWang',person)
    3.    //方式二：借助mapActions：
    4.    ...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

    6. 开启命名空间后，组件中调用commit

    1.    //方式一：自己直接commit
    2.    this.$store.commit('personAbout/ADD_PERSON',person)
    3.    //方式二：借助mapMutations：
    4.    ...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
  • 相关阅读:
    Django自定义manage.py命令实现hexo博客迁移
    Node.js躬行记（18）——半吊子的可视化搭建系统
    Java数组遍历深度解析
    如何在3DMax中使用超过16个材质ID通道？
    互联网行业数据安全建设实践方案
    MFC中对编码文件的操作01
    Numpy数组中的运算与拼接，看这篇就够了
    致医生的一封信：感谢“医”路有你，天天好心情
    计算机专业哀鸿遍野：低代码平台和程序员水火不容，马上被取代
    LED台灯控制芯片 LED调光芯片 LED驱动芯片AH6730
  • 原文地址：https://blog.csdn.net/m0_52601969/article/details/127877072