VUEX

周大胖子

问：啥是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'
4. export default {
5.   data() {
6.     return {
7.      
8.     };
9.   },
10.   store,  //就这样就算是注册 -。- 也不知道 谁 非得说这叫注册
11.   methods: {
12.    
13.   }
14. };

复制代码

   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'
4. Vue.use(Vuex);
6. // 1.state用于在vuex中储存数据
7. var state = {
8.     count:1
9. }
11. // 2.mutations放方法，主要用于改变 state中的数据
12. var mutations={
13.     incCount(){
14.         ++state.count;
15.     }
16. }
18. // 3.getters 数据改变时触发 [类似计算属性] 传值不想写，没啥卵用
19. var getters = {
20.    
21.     computedCount: (state) => {
22.       return state.count*2;
23.     }
24.    
25.   }
27. // 4.action
28. var actions ={
29.     incMutations(context){      // 方法名可以瞎写
30.         context.commit('incCount'); //间接 执行 Mutations 的 方法incCount
31.     }
32. }
34. // 实例化vuex
35. const store = new Vuex.Store({
36.     state,
37.     mutations,
38.     getters,
39.     actions
40. })
42. 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>
25. <script>
26. // 先引入后注册
27. import store from '../vuex/store.js'
29. export default {
30.   data() {
31.     return {
32.       b: false,
33.     };
34.   },
35.   store, //这步完成注册
36.   methods: {
37.     abc(){
38.       this.$store.commit('incCount');   //commit 触发 mutations 内的方法
39.       // this.$store.dispatch('incMutations');   dispatch触发 actions内的方法
40.     }
41.   },
42.   mounted() {
43.     //在组件加载的时候就接收
44.   }
46. };
47. </script>
49. <style>
50. .lmbox{
51.   margin:10px auto;
52.   border:3px solid #eee;
53.   width: 400px;
54.   height: 200px;
55. }
56. </style>

复制代码