Vuex

时间:2021-6-12 作者:qvyue

在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式.
但是如果是大型项目,很多时候都需要在子组件之间传递数据,使用之前的方式就不太方便。Vue 的状态管理工具 [Vuex] 完美的解决了这个问题。
什么是Vuex?
官方说法:Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
个人理解:Vuex是用来管理组件之间通信的一个插件。
安装并引入 Vuex
首先,安装 Vuex:

npm install vuex

其次在 src 目录下,我创建了名为 store 的目录 ( 这是一种选择,你也可以在同级目录创建一个 store.js 文件 ),再在其中创建一个名为 index.js的文件。
index.js中初始化设置如下:

import Vue from 'vue'  
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state:{ //声明数据
        name:'helloVueX'   
    },
})

main.js 文件中,我们将执行以下更新

import Vue from 'vue'
import App from './App'
import store from './store'
new Vue({
  el: '#app',
  store:store,  //store:store 和router一样,将我们创建的Vuex实例挂载到这个vue实例中
  components: { App },
  template: ''
})

在组件中使用Vuex
例如在App.vue中,我们要将state中定义的name拿来在h1标签中显示

name:

{{ $store.state.name }}

或者要在组件方法中使用

methods:{
    add(){
      console.log(this.$store.state.name)
    }
},

VueX中的核心内容
在VueX对象中,其实不止有state,还有用来操作state中数据的方法集,以及当我们需要对state中的数据需要加工的方法集等等成员。
state 是存放状态 和 Vue 实例中的 data 遵循相同的规则
使用如下:

import Vue from 'vue'  
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state:{ //声明数据
        str:'',
        obj:{},
        arr:[],
        num:0,
        bool:true/false
    },
})

getters 是加工state成员给外界 ,可以认为是 store 的计算属性。getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。
使用方法如下:

import Vue from 'vue'  
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state:{ //声明数据
        shopCar:[]  
    },
getters:{ //可以认为是 store 的计算属性
        shopCarPrices(state){
            var sum=0
            for(var i=0;i

组件中调用

this.$store.getters.shopCarPrices

mutations是对 state成员操作 , Vuex 的 store 中的状态的唯一方法是提交 mutation。
使用方法如下:

import Vue from 'vue'  
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state:{ //声明数据
       name:'helloVueX'   
   },
mutations:{
       amend(state){
           state.name = 'jack'
       }
   }
})

而在组件中,我们需要这样去调用这个mutation——例如在App.vue的某个method中:

this.$store.commit('amend')

Mutation传值
单个值提交时:

this.$store.commit('amend',15)

多个提交时:

this.$store.commit('amend',{age:15,sex:'男'})

接收挂载的参数:

  amend(state,val){
         state.name = 'jack'
         console.log(val) // 15或{age:15,sex:'男'}
        }

actions 是用来专门进行异步操作,最终提交mutation方法。
由于setTimeout是异步操作,所以需要使用actions

import Vue from 'vue'  
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state:{ 
       key:''
    },
mutations: {
    updateKey(state,val){
        state.key=val
        console.log(state.key);
    }
  },
actions:{
    updateKey(state,val){
        setTimeout(()=>{
            state.commit('updateKey',val)
        },10)
    }
  }
})

在组件中调用:

this.$store.dispatch('updateKey',10)

modules 模块化状态管理,每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。当项目庞大,状态非常多时,可以采用模块化管理模式。
在创建的store文件夹中在创建一个a.js文件。
在store中的index.js文件中引入刚创建好的a.js文件

import a  from './a'

在index文件中写入

 modules:{
        a:a
    },

创建好的a.js文件中写入模块,可以写如我们需要的核心对象,语法都是一样的
比如:

export default {
    state:{
           username :""
    },
    mutations:{
           add(state,val){
           state.username = val
        },
    },
}

组件中传值

 this.$store.commit('add',res) 
  this.$store.commit('方法名',值) 

组件中调用

this.$store.state.a.username 
a代表的是在这个a模块里 
username 代表的是在a这个模块的state中有一个叫username 的变量

plugins是在vue中使用一些插件 列如可以使用vuex-localstorage
vuex-localstorage 要先进行下载 可以使用

npm install vuex-localstorage
cnpm install vuex-localstorage

index.js中引入 vuex-localstorage

import createPersist from 'vuex-localstorage'

使用方法如下:

plugins:[
        createPersist({namespace:"namespace-for-state"})
],
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。