Vue3.0中如何使用Vuex

 

 

当前的调试工具暂时不支持vuex的调试查看，需要我们额外进行log调试，vuex内置了一个logger模块，我们只需要引入并且注册为插件即可

在 src/store/index.js 中加入如下代码:

import { createLogger } from 'vuex'
 
plugins: [
    createPersistedstate({
      key: 'abc', // erabbit-client-pc-store
      paths: ['user', 'cart']
    }), //这部分是做持久化的
    createLogger()  // 这个是logger模块
  ]
首先呢,这个是vuex是如何定义的,在vue2.0中,我们是这样定义的。

import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)
export default new Vuex.Store({
state:{},  //定义公共数据
mutations:{},  //修改state中的数据
getters:{},  //相当于计算属性,从state中派生出一些状态,当state中的值发生改变的时候,会被重新计算
actions:{},  //发送请求的
modules:{}
 
})
下面这段代码是Vuex在vue3.0中是怎么定义的,来对比一下不同吧! 

import { createStore } from 'vuex' // 导入vuex
 
export default createStore({
  state: {
    name: '小王',
    age: 18
  },
  mutations: {
    update (state, num) {
      state.name = 'xiaoli'
    }
  },
  getters: {
    updateState (state) {
      return state.age + 'nihao'
    }
  },
  actions: {
    jumpTo (context, age = 20) {
      setTimeout(() => {
        context.commit('update', age)
      }, 3000)
    }
  },
  modules: {
  }
})
使用的时候: 

在template模板中使用时,vue2.0和vue3.0用法是一样的,在代码中使用的时候是有点小区别的

vue2.0中的使用: 

export default {
  methods: {
    xxx方法名 () {
      this.$store.commit()
    }
  }
}
vue3.0 中的使用:

1.首先先导入vuex

import { useStore } from 'vuex'  //注意,是useStore不要写错哦,我这里一开始写成userStore..了,

报的错误是Object(...) 不是一个函数

2.这是vuex在vue3.0中是如何使用的

<template>
  <div id="nav">
    <p>{{$store.state.name}}</p>
    <button @click="mutationsA">+</button>
  </div>
  <router-view/>
</template>
<script>
import { useStore } from 'vuex'
export default {
  name: 'App',
  setup () {
    const store = useStore()  //记得加这一句
  //这一句是使用vuex仓库,我试了一下,注释掉这一句,直接使用useStore会报错
    console.log(store.state.name)
    console.log(store.getters.newname)
    const mutationsA = () => {
      store.commit('updatename')
    }
    return { mutationsA }
  }
}
</script>
接下来说一下vuex持久化,vuex是将数据保存到了浏览器的内存中,刷新,数据会丢失。解决办法是把vuex存到本地或者cookie中。

1.准备vuex模块 1.创建modules  2.在store/index.js中引入     (modules下准备几个模块呦!!)

举个例子吧,cart.js 

export default {
  namespaced: true,
  state: () => {
    return {
      list: []
    }
  }
}
2.安装vuex-persistedstate插件  npm i  vuex-persistedstate

3.如何使用插件来做持久化呢?

store/index.js

import createPersistedstate from 'vuex-persistedstate' //第一步导入
 
export default createStore({
  modules: {
   xxxx,
   xxxx
  },
  //第二步是加这段代码,默认是存到了localStorage中
  plugins: [
    createPersistedstate({
      key: 'abc',
      paths: ['user', 'cart']
   })
  ]
})