老莫的笔记本  
  
请选择 进入手机版 | 继续访问电脑版
查看: 665|回复: 0

VUEX

[复制链接]

572

主题

767

帖子

3637

积分

超级版主

Rank: 8Rank: 8

积分
3637
发表于 2018-12-3 00:23:20 | 显示全部楼层 |阅读模式
问:啥是VUEX ?
答: 是一个专门为VUE应用程序的状态管理模式库;

问:VUEX是干啥的?
答: 1. 不同组件之间数据的共享;  2.组件里面数据的持久化;

问:VUEX的使用场景是什么?
答:  举个例子就类似于 主页 和 新闻页  无组件从属关系间的 数据传递;

问:VUEX怎么使用?
1. 安装 cnpm install vuex --save
2. 在 src 目录下,新建 vuex的文件夹,然后新建store.js 文件 ;
3. 在 store.js 中 引入,定义数据、定义方法,然后实例化,再然后抛出;
    3.1 在state 中定义属性
    3.2 在mutations中定义方法
    3.3
4. 在需要通信的组件中使用,例如 主页和案例
    4.1 先引入 import store from "./vuex/store.js"
    4.2 在当前组件中注册
  1. // 先引入后注册
  2. import store from '../vuex/store.js'
  3. export default {
  4.   data() {
  5.     return {
  6.      
  7.     };
  8.   },
  9.   store,  //就这样就算是注册 -。- 也不知道 谁 非得说这叫注册
  10.   methods: {
  11.    
  12.   }
  13. };
复制代码
   4.3 直接调用state中的数据 {{ this.$store.state.count }}     4.4 利用commit 调用数据中的方法  $this.$store.commit('incCount') ;
    4.5 说到getter那就神奇又没啥卵用了, 这玩意就是数据改变时候触发的函数;
    4.6 说到action 那就更神奇更没啥卵用了,据说特点是可以调用异步方法 ,在组件中 利用 dispatch调用

贴三个代码
vuex/store.js
  1. import Vue from 'vue'
  2. import Vuex from 'vuex'
  3. Vue.use(Vuex);
  4. // 1.state用于在vuex中储存数据
  5. var state = {
  6.     count:1
  7. }
  8. // 2.mutations放方法,主要用于改变 state中的数据
  9. var mutations={
  10.     incCount(){
  11.         ++state.count;
  12.     }
  13. }
  14. // 3.getters 数据改变时触发 [类似计算属性] 传值不想写,没啥卵用
  15. var getters = {
  16.    
  17.     computedCount: (state) => {
  18.       return state.count*2;
  19.     }
  20.    
  21.   }
  22. // 4.action
  23. var actions ={
  24.     incMutations(context){      // 方法名可以瞎写
  25.         context.commit('incCount'); //间接 执行 Mutations 的 方法incCount
  26.     }
  27. }
  28. // 实例化vuex
  29. const store = new Vuex.Store({
  30.     state,
  31.     mutations,
  32.     getters,
  33.     actions
  34. })
  35. export default store;
复制代码

试验品案例页面 Anli.vue
  1. <template>
  2.     <div id="anli">
  3.         这是案例组件
  4.       
  5.           <button @click="lmback()">点击触发返回上一步操作</button>
  6.         <h2>组件嵌套</h2>
  7.         <hr>
  8.         <ol>
  9.           <li> <router-link to="/anli/one"> 案例组件1</router-link></li>
  10.           <li> <router-link to="/anli/two"> 案例组件2</router-link></li>
  11.           <li> <router-link to="/anli/three"> 案例组件3 路由重定向的测试</router-link></li>
  12.           <li> <router-link :to="{ name: 'lmsix', params: { userId: 123 }}" > 案例组件6 路由命名的测试</router-link></li>
  13.         </ol>
  14.         <div class="lmbox">
  15.             <router-view></router-view>
  16.         </div>
  17.         
  18.         <hr>
  19.         {{this.$store.state.count}}
  20.         <hr>
  21.         <button @click="abc()"> 点击改变数据 </button>
  22.     </div>
  23. </template>
  24. <script>
  25. // 先引入后注册
  26. import store from '../vuex/store.js'
  27. export default {
  28.   data() {
  29.     return {
  30.       b: false,
  31.     };
  32.   },
  33.   store, //这步完成注册
  34.   methods: {
  35.     abc(){
  36.       this.$store.commit('incCount');   //commit 触发 mutations 内的方法
  37.       // this.$store.dispatch('incMutations');   dispatch触发 actions内的方法
  38.     }
  39.   },
  40.   mounted() {
  41.     //在组件加载的时候就接收
  42.   }
  43. };
  44. </script>
  45. <style>
  46. .lmbox{
  47.   margin:10px auto;
  48.   border:3px solid #eee;
  49.   width: 400px;
  50.   height: 200px;
  51. }
  52. </style>
复制代码






回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表