标签：Vue miniStore vuex sum value mapState state mapGetters store
1 # 一、理解vuex
2 1.概念：专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读写），也是一种组件间通信的方式，且适用于任意组件间通信。
3 2.Github地址：https://github.com/vuejs/vuex
4 # 二、什么时候使用Vuex
5 1.多个组件依赖同一状态
6 2.来自不同组件的行为需要变更同一状态
7 # 三、安装： npm i vuex@3
8 vuex@3 对应的 vue2
9 vuex@4 对应的 vue3
10 # 四、搭建vuex环境
11 // 该文件用于创建Vuex中最为核心的store，路劲(一般都放这里)：src/store/index.js
12 // 引入Vuex
13 import Vue from 'vue'
14 import Vuex from 'vuex'
15
16 // 引入插件
17 Vue.use(Vuex);
18
19 // 准备actions，用于响应组件中的动作
20 const actions = {
21 jia(miniStore, value){
22 miniStore.commit('JIA', value)
23 },
24 jian(miniStore, value){
25 miniStore.commit('JIAN', value)
26 },
27 jiaOdd(miniStore, value){
28 if (miniStore.state.sum % 2){
29 miniStore.commit('JIA', value)
30 }
31 },
32 jiaWait(miniStore, value){
33 setTimeout(()=>{
34 miniStore.commit('JIA', value)
35 }, 500);
36 }
37 }
38 // 准备mutation，用于操作数据（state）
39 const mutations = {
40 JIA(context, value) {
41 context.sum += value;
42 },
43 JIAN(context, value) {
44 context.sum -= value;
45 },
46 }
47 // 准备state，用于存储数据
48 const state = {
49 sum: 0,
50 }
51
52
53 // 创建并暴露store
54 export default new Vuex.Store({
55 actions,
56 mutations,
57 state
58 });
59 # 组件部分代码
60 <template>
61 <div>
62 <h1>当前求和为：{{sum}}</h1>
63 <h1>将当前求和的值放大10倍：{{bigSum}}</h1>
64 <select v-model.number="n">
65 <option value="1">1</option>
66 <option value="2">2</option>
67 <option value="3">3</option>
68 </select>
69 <button @click="invrement">+</button>
70 <button @click="decrement">-</button>
71 <button @click="invrementOdd">当前求和为奇数再加</button>
72 <button @click="invrementWait">等一等再加</button>
73 </div>
74 </template>
75 <script>
76 import {mapState, mapGetters} from 'vuex'
77 export default {
78 name: 'Count',
79 data(){
80 return {
81 n: 1
82 }
83 },
84 computed:{
85 // sum(){
86 // return this.$store.state.sum;
87 // },
88 // bigSum(){
89 // return this.$store.getters.bigSum;
90 // },
91 // 借助mapState生成从state中来的计算数据
92 // ...mapState({sum: 'sum'}), // 代替上面的sum()
93 ...mapState(['sum']), // 数组写法
94 // 借助mapState生成从getters中来的计算数据
95 // ...mapGetters({bigSum: 'bigSum'}), // 代替上面的bigSum()
96 ...mapGetters(['bigSum']), // 数组写法
97 },
98 methods:{
99 invrement(){
100 // console.log('@', this);
101 this.$store.commit('JIA', this.n);
102 },
103 decrement(){
104 this.$store.commit('JIAN', this.n);
105 },
106 invrementOdd(){
107 this.$store.dispatch('jiaOdd', this.n);
108 },
109 invrementWait(){
110 this.$store.dispatch('jiaWait', this.n);
111 }
112 },
113 mounted(){
114
115 }
116 }
117 </script>
118 <style scoped>
119 button {
120 margin-left: 5px;
121 }
122 </style>
123
124
125 # 1.组件中渡漆vuex中的数据：$store.state.sum
126 # 2.组件中修改vuex中的数据： $store.dispatch('actions中的方法名', data) 或 $store.commit('mutations中的方法名', data)
127 # 备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，不写dispatch，直接写commit
标签：Vue,miniStore,vuex,sum,value,mapState,state,mapGetters,store 来源： https://www.cnblogs.com/watermeloncode/p/16416236.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。