您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生

vuex的介绍 State Mutation store实现不同组件计数器数据共享_转

发布时间：2023-04-12 17:35:34编辑：雪饮阅读（）

首先我想说的就是一般组件之间传值是可以通过如
14父子组件传值 -完整 (gaojiupan.cn)
15父组件主动获取子组件的数据和方法 子组件主动获取父组件的数据和方法(组件传值) (gaojiupan.cn)
16vue非父子组件传值完整 (emit,on) (gaojiupan.cn)
这里所讲的去实现，实际上我的理解是只要传递与接收值的两个组件之间有关系，这里说的关系是通过components能关联到一起。则上面这几个传递参数的则一般的都是可以的。
但是有一种情况是动态组件，就是比如App.vue里面没有具体的components的定义，而是直接通过router-view占位，然后通过路由来实现的。
这个时候上面的方法我觉得应该是不行的。
当然也可以利用其它的例如cookie、sessionstorage、localstorage等。
但是这几个其实一般不是直接引用，可能涉及到即时性问题，也有解决方案。
但是vuex是至少目前我认为最好的方案。
 
安装vuex
npm install vuex@3 –save
这里有个小坑，在vue2中能使用vuex3，不能使用过高，默认安装好像是vuex4.
使用vuex
假定我有一个vuex的练习页面vuex_practice.vue
<template>
    <div>
        <div>这里是vuex</div>
        <div>
            <button @click="goto('vuex_practice_1')">vuex1练习区</button>
            <button @click="goto('vuex_practice_2')">vuex2练习区</button>
        </div>
        <hr/>
        <router-view></router-view>
    </div>
</template>
 
<script>
    export default {    
      data () {
        return {}
      },
      methods:{
        goto(name){
          this.$router.push({name:name});
        }
      },
    }
</script>
就是说这个vuex_practice.vue里面包含vuex_practice_1.vue：
<template>
    <div>
        <div>这里是vuex1</div>
        <div>store.state.count的值：{{this.$store.state.count}}</div>
        <button @click="changessc()">store.state.count的值增加1(直接加)</button>
    </div>
</template>
 
<script>
    import store from '../store.js';
    export default {    
      data () {
        return {}
      },
      methods:{
        changessc(){
            this.$store.state.count++;
        }
      },
      store
    }
</script>
以及vuex_practice_2.vue：
<template>
    <div>
        <div>这里是vuex2</div>
        <div>store.state.count的值：{{this.$store.state.count}}</div>
        <button @click="changessc()">store.state.count的值增加1(通过commit)</button>
    </div>
</template>
 
<script>
    import store from '../store.js';
    export default {    
      data () {
        return {}
      },
      methods:{
        changessc(){
            this.$store.commit('incCount');
        }
      },
      store
    }
</script>
然后App.vue中将vuex_practice.vue挂上
<template>
  <div id="app">
    <button @click="goto('index')">首页</button>
    <button @click="goto('news')">新闻</button>
    <button @click="goto('news2')">新闻2区</button>
    <button @click="goto('user')">用户</button>
    <button @click="goto('MintUI_Practice')">MintUI练习区</button>
    <button @click="goto('ElementUI_Practice')">ElementUI练习区</button>
    <button @click="goto('vuex_practice')">vuex练习区</button>
    <hr/>
    <router-view></router-view>
  </div>
</template>
 
<script>
    export default {    
      data () {
        return {}
      },
      methods:{
        goto(name){
          this.$router.push({name:name});
        }
      },
    }
</script>
 
基于上篇的模块化，所以这里router.js也新增上vuex_practice、vuex_practice_1、vuex_practice_2这三条路由，并组织这三条路由的关系（这个其实我觉得影响不大，各自独立应也是没有问题的）则router.js如：
import Index from './components/Index.vue';
import News from './components/news.vue';
import News2 from './components/news2.vue';
import Content1 from './components/content1.vue';
import Content2 from './components/content2.vue';
import User from './components/user.vue';
import UserAdd from './components/userAdd.vue';
import UserList from './components/userList.vue';
import ElementUI_Practice from './components/ElementUI_Practice.vue';
import MintUI_Practice from './components/MintUI_Practice.vue';
import VueRouter from 'vue-router';
import vuex_practice from './components/vuex_practice.vue';
import vuex_practice_1 from './components/vuex_practice_1.vue';
import vuex_practice_2 from './components/vuex_practice_2.vue';
const routes=[
    {path:'/',component:Index,name:'index'},
 
    {path:'/news',component:News,name:'news'},
    {path:'/news2',component:News2,name:'news2'},
    {path:'/news/content1/:aid',component:Content1},
    {path:'/news/content2',component:Content2},
    {
      path:'/user',
      component:User,
      name:'user',
      children:[
        {path:'/user_add',component:UserAdd,name:'user_add'},
        {path:'/user_list',component:UserList,name:'user_list'},
      ]
    },
    //vuex练习
    {
      path:'/vuex_practice',
      component:vuex_practice,
      name:'vuex_practice',
      children:[
        {path:'/vuex_practice_1',component:vuex_practice_1,name:'vuex_practice_1'},
        {path:'/vuex_practice_2',component:vuex_practice_2,name:'vuex_practice_2'},
      ]
    },
    {path:'MintUI_Practice',component:MintUI_Practice,name:'MintUI_Practice'},
    {path:'ElementUI_Practice',component:ElementUI_Practice,name:'ElementUI_Practice'},
    {path:'*',component:Index}
  ];
  const router=new VueRouter({
    routes,
    mode:'history'
  })
export default router;
然后我们建立一个如store.js于main.js同目录下如
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
//state用于在vuex中存储数据
var state={count:1};
//mutations里面放的是方法、方法主要用于改变state里面的数据
var mutations={
    incCount(){
        state.count++;
    }
};
//vuex实例化
const store=new Vuex.Store({state,mutations});
 
export default store;