Vuexphp用来吧~

  

目录

一、Vuex的简介

1、为什么要学习Vuex?

解决了前端组件传参的问题。

组件传参：

        ①子传父：$emit

        ②父传子：props

        ③总线:vue根实例中定义变量，这个变量也是vue实例

2、什么是Vuex?

 官方图解Vuex：

 图解Vuex各组件:

 变量传值的演变方式：

Vuex的核心组件：

二、Vuex的安装以及store.js的使用

1、vuex使用步骤

        1.1 安装

        npm install vuex -s 【下载Vuex最新的版本】

        1.2 导入Vuex的核心4个组件，然后通过index.js加载进来

        1.3 将Vuex对应的index,js 挂载到 main.js 中的vue实例中

        1.4 测试Vuex的存储变量的功能

              npm i -S vuex@3.6.2 

 三、Vuex中的设置及获取变量值

四、Vuex中的异步同步操作

五、Vuex后台交互

---

一、Vuex的简介

1、为什么要学习Vuex?

解决了前端组件传参的问题。

组件传参：

        ①子传父：$emit

        ②父传子：props

        ③总线:vue根实例中定义变量，这个变量也是vue实例

2、什么是Vuex?

 官方图解Vuex：

 图解Vuex各组件:

 变量传值的演变方式：

Vuex的核心组件：

        sate.js        存储变量

        Getters.js        获取变量值、

        mutations.js        改变变量值（同步）

        actions.js        改变变量值（异步）

---

二、Vuex的安装以及store.js的使用

1、vuex使用步骤

1.1 安装

        npm install vuex -s 【下载Vuex最新的版本】

下载之后【package.json】 里会出现vuex

1.2 导入Vuex的核心4个组件，然后通过index.js加载进来

建立store文件，将【actions.js】、【index.js】、【mutations.js】、【state.js】、【getters.js】添加进去

1.3 将Vuex对应的index,js 挂载到 main.js 中的vue实例中

1.4 测试Vuex的存储变量的功能

记得更改vuex依赖的版本 运行一下命令

 npm i -S vuex@3.6.2 

【state.js】

1.  
   export default{
2.  
   resName4:'cc咖啡馆'
3.  
   }

【router/index.js】

1.  
   import Vue from 'vue'
2.  
   import Router from 'vue-router'
3.  
   import HelloWorld from '@/components/HelloWorld'
4.  
   import AppMain from '@/components/AppMain'
5.  
   import TopNav from '@/components/TopNav'
6.  
   import LeftNav from '@/components/LeftNav'
7.  
   import Login from '@/views/Login'
8.  
   import Reg from '@/views/Reg'
9.  
   import Articles from '@/views/sys/Articles'
10.  
    import VuexPage1 from '@/views/sys/VuexPage1'
11.  
     
12.  
    Vue.use(Router)
13.  
     
14.  
    export default new Router({
15.  
    routes: [{
16.  
    path: '/',
17.  
    name: 'Login',
18.  
    component: Login
19.  
     
20.  
    },
21.  
    {
22.  
    path: '/Login',
23.  
    name: 'Login',
24.  
    component: Login
25.  
     
26.  
    },
27.  
    {
28.  
    path: '/Reg',
29.  
    name: 'Reg',
30.  
    component: Reg
31.  
     
32.  
    }
33.  
    ,
34.  
    {
35.  
    path: '/AppMain',
36.  
    name: 'AppMain',
37.  
    component: AppMain,
38.  
    children: [{
39.  
    path: '/LeftNav',
40.  
    name: 'LeftNav',
41.  
    component: LeftNav
42.  
     
43.  
    },
44.  
    {
45.  
    path: '/TopNav',
46.  
    name: 'TopNav',
47.  
    component: TopNav
48.  
     
49.  
    },
50.  
    {
51.  
    path: '/sys/Articles',
52.  
    name: 'Articles',
53.  
    component: Articles
54.  
     
55.  
    },
56.  
    {
57.  
    path: '/sys/VuexPage1',
58.  
    name: 'VuexPage1',
59.  
    component: VuexPage1
60.  
     
61.  
    }
62.  
    ]
63.  
     
64.  
    }
65.  
    ]
66.  
    })

【VuexPage1.vue】

1.  
   <template>
2.  
   <div>
3.  
   <p>欢迎来到{{msg}}</p>
4.  
   </div>
5.  
   </template>
6.  
    
7.  
   <script>
8.  
   export default {
9.  
   name: 'VuexPage1',
10.  
    data () {
11.  
    return {
12.  
    }
13.  
    },
14.  
    computed:{
15.  
    msg(){
16.  
    console.log(this.$store)
17.  
    // 从vuex 的 state 文件中获取值
18.  
    return this.$store.state.resName;
19.  
    // this.$router.push()...
20.  
    // this.$root
21.  
    }
22.  
    }
23.  
    }
24.  
     
25.  
    </script>
26.  
     
27.  
    <style>
28.  
    </style>

运行效果展示：

---

 三、Vuex中的设置及获取变量值

是通过方法去获取值。

【VuexPage2.vue】

1.  
   <template>
2.  
   <div>
3.  
   <p>页面2：欢迎来到{{msg}}</p>
4.  
   </div>
5.  
   </template>
6.  
    
7.  
   <script>
8.  
   export default {
9.  
   name: 'VuexPage2',
10.  
    data () {
11.  
    return {
12.  
    }
13.  
    },
14.  
     
15.  
    computed:{
16.  
    msg(){
17.  
    // 从vuex的state文件中获取值
18.  
    // return this.$store.state.resName;——>不推荐，不安全
19.  
    // 通过getters.js文件获取state.js中定义的变量值
20.  
    return this.$store.getters.getResName;
21.  
    }
22.  
    }
23.  
    }
24.  
    </script>
25.  
     
26.  
    <style scoped>
27.  
     
28.  
    </style>

【router/index.js】

1.  
   import Vue from 'vue'
2.  
   import Router from 'vue-router'
3.  
   import HelloWorld from "../components/HelloWorld";
4.  
   import AppMain from "../components/AppMain";
5.  
   import LeftNav from "../components/LeftNav";
6.  
   import TopNav from "../components/TopNav";
7.  
   import Login from "../views/Login";
8.  
   import Reg from "../views/Reg";
9.  
   import Articles from "../views/sys/Articles";
10.  
    import VuexPage1 from "../views/sys/VuexPage1";
11.  
    import VuexPage2 from "../views/sys/VuexPage2";
12.  
     
13.  
     
14.  
    Vue.use(Router)
15.  
     
16.  
    export default new Router({
17.  
    routes: [
18.  
    {
19.  
    path: '/',
20.  
    name: 'Login',
21.  
    component: Login
22.  
    },
23.  
    {
24.  
    path: '/Login',
25.  
    name: 'Login',
26.  
    component: Login
27.  
    },
28.  
    {
29.  
    path: '/Reg',
30.  
    name: 'Reg',
31.  
    component: Reg
32.  
    },
33.  
    {
34.  
    path: '/AppMain',
35.  
    name: 'AppMain',
36.  
    component: AppMain,
37.  
    children:[
38.  
    {
39.  
    path: '/LeftNav',
40.  
    name: 'LeftNav',
41.  
    component: LeftNav
42.  
    },
43.  
    {
44.  
    path: '/TopNav',
45.  
    name: 'TopNav',
46.  
    component: TopNav
47.  
    },
48.  
    {
49.  
    path: '/sys/Articles',
50.  
    name: 'Articles',
51.  
    component: Articles
52.  
    },
53.  
    {
54.  
    path: '/sys/VuexPage1',
55.  
    name: 'VuexPage1',
56.  
    component: VuexPage1
57.  
    },
58.  
    {
59.  
    path: '/sys/VuexPage2',
60.  
    name: 'VuexPage2',
61.  
    component: VuexPage2
62.  
    }
63.  
    ]
64.  
    }
65.  
    ]
66.  
    })

【mutations.vue】

1.  
   export default{
2.  
   // 定义一个setResName的方法
3.  
   setResName:(state,payload)=>{
4.  
   // sate对象就对应了sate.js中的对象
5.  
   // payload载荷 对应的 传递的 josn对象参数(name:zs,age:12)
6.  
   state.resName = payload.resName;
7.  
   }
8.  
   }

【getters.js】

1.  
   // 拿
2.  
   export default{
3.  
   getResName:(state)=>{/* 这里的sate代表的是sate.js整个文件 */
4.  
   return state.resName;
5.  
   }
6.  
   }

效果运行： 点击按钮

 就会出现以下效果:

 

（角色管理）VuexPage2.vue

 点击按钮 之后：

 

---

四、Vuex中的异步同步操作

【VuexPage1.vue】

1.  
   <template>
2.  
   <div>
3.  
   <p>页面1：欢迎来到{{msg}}</p>
4.  
   <button @click="buy">买下它</button>
5.  
   <button @click="buyAsync">最终店长</button>
6.  
   </div>
7.  
   </template>
8.  
    
9.  
   <script>
10.  
    export default {
11.  
    name: 'VuexPage1',
12.  
    data () {
13.  
    return {
14.  
    }
15.  
    },
16.  
    methods:{
17.  
    buy(){
18.  
    // 通过commit方法会调用mutation.js中定义好的方法
19.  
    this.$store.commit("setResName",{
20.  
    resName:'KFC'
21.  
    })
22.  
    },
23.  
    buyAsync(){
24.  
    this.$store.dispatch("setResNameAsync",{
25.  
    resName:'麦当劳'
26.  
    })
27.  
    }
28.  
    },
29.  
    computed:{
30.  
    msg(){
31.  
    // 从vuex的state文件中获取值
32.  
    // return this.$store.state.resName; 不推荐，不安全
33.  
    // 通过 getters.js文件获取 state.js中定义的变量值
34.  
    return this.$store.getters.getResName;
35.  
    }
36.  
    }
37.  
    }
38.  
    </script>
39.  
     
40.  
    <style scoped>
41.  
     
42.  
    </style>

【actions.js】

1.  
   export default{
2.  
   setResNameAsync:(context,payload)=>{
3.  
   // 异步修改值 在异步的方法里调用同步方法
4.  
   // context 指的是Vuex的上下文,相当于 this.$store
5.  
   // 此代码6秒钟后执行
6.  
   setTimeout(function(){
7.  
   context.commit("setResName",payload);
8.  
   },6000);
9.  
    
10.  
    }
11.  
    }

效果演示：

先点按钮最终的店长，然后点按钮盘它：

 时隔6秒之后，发生改变：

---

五、Vuex后台交互

【actions.js】 

1.  
   export default {
2.  
   setResNameAsync:(context,payload)=>{
3.  
   // 异步修改值 在异步方法中调用了同步方法
4.  
   // context指的是Vuex的上下文，相当于 this.$store
5.  
   // 死代码，6秒后执行
6.  
   setTimeout(function (){
7.  
   context.commit("setResName",payload);
8.  
   },6000);
9.  
    
10.  
    let _this=payload._this;
11.  
    let url=_this.axios.urls.SYSTEM_MENU_TREE;
12.  
    _this.axios.post(url,{}).then(r=>{
13.  
    console.log(r);
14.  
    }).catch(e=>{
15.  
     
16.  
    });
17.  
    }
18.  
    }

【VuexPage1.vue】

1.  
   <template>
2.  
   <div>
3.  
   <p>页面1：欢迎来到{{msg}}</p>
4.  
   <button @click="buy">盘它</button>
5.  
   <button @click="buyAsync">最终的店长</button>
6.  
   </div>
7.  
   </template>
8.  
    
9.  
   <script>
10.  
    export default {
11.  
    name: 'VuexPage1',
12.  
    data () {
13.  
    return {
14.  
    }
15.  
    },
16.  
    methods:{
17.  
    buy(){
18.  
    //通过commit方法 会 调用 mutations.js文件中定义好的方法
19.  
    this.$store.commit("setResName",{
20.  
    resName:'鸡肉味的猫粮'
21.  
    })
22.  
    },
23.  
    buyAsync(){
24.  
    this.$store.dispatch("setResNameAsync",{
25.  
    resName:'杨总',
26.  
    _this:this
27.  
    })
28.  
    }
29.  
    },
30.  
    computed:{
31.  
    msg(){
32.  
    // 从vuex的state文件中获取值
33.  
    // return this.$store.state.resName;——>不推荐，不安全
34.  
    // 通过getters.js文件获取state.js中定义的变量值
35.  
    return this.$store.getters.getResName;
36.  
    }
37.  
    }
38.  
    }
39.  
    </script>
40.  
     
41.  
    <style scoped>
42.  
     
43.  
    </style>

运行：

---

本篇内容分享到此结束，我们下期再见！ 

这篇好文章是转载于：学新通技术网