vue3 VUEX

store/index：

 

 1 import { createStore } from 'vuex'
 2 export default createStore({
 3   state: {
 4     info: 'hello'
 5   },
 6   mutations: {
 7     // 定义mutations，用于修改状态(同步)
 8     //第一个参数state状态
 9     //第二个是调用此方法传递的实参
10     updateInfo (state, payload) {
11       state.info = payload
12     }
13   },
14   actions: {
15     // 定义actions，用于修改状态(异步)
16     // 2秒后更新状态 
17     //第一个参数 上下文一般用commit来调用mutations中的方法修改state
18     //第二个参数 调用此方法传递过来的参数
19     updateInfo (context, payload) {
20       setTimeout(() => {
21         //调用mutations中的方法修改state
22         context.commit('updateInfo', payload)
23       }, 2000)
24     }
25   },
26   getters: {
27     // 定义一个getters
28     formatInfo (state) {
29       return state.info + ' Tom'
30     }
31   },
32   modules: {
33   }
34 })

 

 

 

 

 
Home 组件:
 1  1 <template>
 2  2   <div>测试组件</div>
 3  3   <hr>
 4  4   <!-- 页面中直接使用渲染时与vue2中的使用方法相同 -->
 5  5   <div>获取Store中的state、getters: {{$store.getters.formatInfo}}</div>
 6  6   <button @click='handleClick'>点击</button>
 7  7 </template>
 8  8  
 9  9 <script>
10 10 // 按需引入useStore()方法
11 11 import { useStore } from 'vuex'
12 12  
13 13 export default {
14 14   name: 'Home',
15 15   setup () {
16 16     // this.$store.state.info
17 17     // Vue3中store类似于Vue2中this.$store
18 18     // useStore()方法创建store对象，相当于src/store/index.js中的store实例对象
19 19     const store = useStore()
20 20     console.log(store.state.info) // hello
21 21     // 修改info的值
22 22     const handleClick = () => {
23 23       // 触发mutations，用于同步修改state的信息
24 24       // store.commit('updateInfo', 'nihao')
25 25       // 触发actions，用于异步修改state的信息
26 26       store.dispatch('updateInfo', 'hi')
27 27     }
28 28     return { handleClick }
29 29   }
30 30 }
31 31 </script>

 

 

 
posted @ 2023-03-17 09:55  星河落夜  阅读(42)  评论(1)    收藏  举报