vuex( vue 2.0 )_vue2.0 vuex-CSDN博客

本文详细介绍了Vuex在Vue.js应用中的使用方法，包括状态存储、获取、变更及异步操作等核心概念，并展示了如何利用Vuex进行跨组件数据共享。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vuex 是用于多组件的的状态共享，主要解决数据共享问题，可以跨组件传参

vuex 数据储存在内存中，当页面重新去加载vue的时候会初始化vue所以vuex的数据会丢失

解决办法通过本地缓存解决数据问题

vue的方法

state储存数据

使用方法 this.store.state.数据名称

快捷方式使用 import { mapState } from 'vuex'

computed: {
    name(){
     return this.$store.state.name
    }
    ...mapState({name:'vuex Statel里面的关键字体'});
    ...mapState( [name:name])
    增强属性简化
    ...mapState( [name])
}

getters 数据的计算属性用于初始化数据更改

快捷方式使用 import { mapGetters } from 'vuex'

computed: {
    name(){
     return this.$store.getters.name
    }
    ...mapGetters({name:'vuex Statel里面的关键字体'});
    ...mapGetters([name:name])
    增强属性简化
    ...mapGetters([name])
}

mutations 事件处理

methods:{
    gteName(){
        this.$store.comit('事件名称'，参数)
    } 
    // 此时这个name不在时使用的变量而是事件
    ...mapMutations({name:'vauex 事件名称'}) 
// 此时可以在html 里面直接使用 name 事件 
}

actions 异步事件处理！不能在这里处理数据，必在 mutations里面改变数据

vuex

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

组件使用

<template>
    <div>
       <div> 姓名:  {{getname}}  {{name}} </div>
        <button @click="changname">点击换名称</button>
        <button @click="changName(newname)">点击直接换名称</button>
        <button @click="changNameActions(newname)">提交改造名称</button>
        <button @click="changNameVue(newname)">提交改造名称</button>
    </div>
</template>

<script>
  import   {mapState,mapMutations,mapActions}  from  'vuex'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
     return{
         newname:'cjjdchdkhjvhhjxhv'
     }
  },
    computed:{
     ...mapState(['name']),
    getname(){
        return  this.$store.state.name
    }
  },
    created:{
    },
  methods:{
      ...mapActions(['changNameActions']),
      ...mapMutations(['changName']),
      changNameVue(){
            this.$store.dispatch("changNameActions","的")
      },
      changname(){
          let newvalue = "张三"
          this.$store.commit("changName",newvalue)
      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

modules 模块

vuex 关键一定要开启 namespaced 不然找不到模块名称，mapState,mapMutation,mapActions找不到模块

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const count = {
  namespaced:true,
  state: {
    name:'不是张三',
    age:30,
  },
  mutations: {
    changName(state ,value){
      console.log(value.name,"value.name",value)
      state.name = value
    }
  },
  actions: {
    changNameActions(context,value){
      context.commit('changName',"给他改成张三")
      console.log(context,value)
    }
  },
}
export default new Vuex.Store({
  namespace:true,
  modules: {
    count
  }
})

组件

<template>
    <div>
       <div> 姓名:  {{getname}}  {{name}} </div>
        <button @click="changname">点击换名称</button>
        <button @click="changName(newname)">点击直接换名称</button>
        <button @click="changNameActions(newname)">提交改造名称</button>
        <button @click="changNameVue(newname)">提交改造名称</button>
    </div>
</template>

<script>
  import   {mapState,mapMutations,mapActions}  from  'vuex'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
     return{
         newname:'cjjdchdkhjvhhjxhv'
     }
  },
    computed:{
     ...mapState('count',['name']),
    getname(){
        return  this.$store.state.count.name
    }
  },
    created:{
    },
  methods:{
      ...mapActions('count',['changNameActions']),
      ...mapMutations('count',['changName']),
      changNameVue(){
            this.$store.dispatch("count/changNameActions","的")
      },
      changname(){
          let newvalue = "张三"
          this.$store.commit("count/changName",newvalue)
      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>