vue3状态管理vuex

安装配置

1. 下载配置vuex
   npm install vuex
2. 在入口文件 main.js 引入

import { createApp } from 'vue'
import App from './App.vue'
import store from './store/index'

// 创建appvue
const app = createApp(App)
app.use(store)
app.mount('#app')

核心

state

含义 存储状态数据

import { createStore } from 'vuex'
const store = createStore({
  state: {
    name1: '小七'
  },
})
export default store```

使用
```xml
<template>
  <p>{{$store.state.name1}}</p>
  <p>{{store.state.name1}}</p>
</template>
<script>
import { useStore } from 'vuex'
export default {
  setup () {
    const store = useStore()
    return {
      store,
    }
  }
}
</script>
<style>
</style>

getters

类似于组件的计算属性
定义

import { createStore } from 'vuex'

const store = createStore({
  state: {
    name1: '小七'
  },
  getters：{
    nameGetter：(state)=>{
      return state.name+'*'
    }
  }，
})
export default store

使用

<template>
  <p>{{$store.state.name1}}</p>
  <p>{{store.state.name1}}</p>
</template>
<script>
import { useStore } from 'vuex'
export default {
  setup () {
    const store = useStore()
    return {
      store,
    }
  }
}
</script>
<style>
</style>

mutations

vuex的store状态更新的唯一方式：提交 mutation

import { createStore } from 'vuex'

const store = createStore({
  state: {
    name: '小七'
  },
  getters：{
    nameGetter：(state)=>{
      return state.name+'*'
    }
  },
   mutations: {
    SET_NAME: (state, data) => {
      state.name = data
    }
  },
})
export default store

使用

<template>
  <p>{{$store.state.name1}}</p>
  <p>{{store.state.name1}}</p>
  <button @click="update('李danguner')"></button>
</template>
<script>
import { useStore } from 'vuex'
export default {
  setup () {
    const store = useStore()
    const update= (val)=>{
      store.commit('SET_NAME',val)
    }
    return {
      store,
      update
    }
  }
}
</script>
<style>
</style>

actions

异步操作在action中进行，再传递到mutation

import { createStore } from 'vuex'

const store = createStore({
  state: {
    name: '小七'
  },
  getters：{
    nameGetter：(state)=>{
      return state.name+'*'
    }
  },
  mutations: {
    SET_NAME: (state, data) => {
      state.name = data
    }
  },
  actions:{
    setName({commit},data)=>{
      commit('SET_NAME',data)
  }
})
export default store

使用

<template>
  <p>{{$store.state.name1}}</p>
  <p>{{store.state.name1}}</p>
  <button @click="update('李danguner')"></button>
</template>
<script>
import { useStore } from 'vuex'
export default {
  setup () {
    const store = useStore()
    const update= (val)=>{
      store.dispatch('setName',val)
    }
    return {
      store,
      update
    }
  }
}
</script>
<style>
</style>

modules

当应用变得复杂时，state中管理的变量变多，store对象就有可能变得相当臃肿。为了解决这个问题，vuex允许我们将store分割成模块化（modules），而每个模块拥有着自己的state、mutation、action、getters等

import { createStore } from 'vuex'
const moudleA = {
  namespaced: true,
  state: () => {
    return {
      name: ''
    }
  },
  mutations: {
    SET_NAME: (state, data) => {
      state.name = data
    }
  },
  actions: {
    setName: ({ commit }, data) => {
      commit('SET_NAME', data)
    }
  },
}
const store = createStore({
  state: {
    name1: '小七'
  },
  getters: {
    name1G (state) {
      return state.name1 + '**'
    },
    nameG (state) {
      return state.moudleA.name + '**'
    }
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    moudleA
  }
})
export default store

使用

<template>
  <a ref="target_a">{{$store.getters.name1G}}</a>
  <p>模块A的名称:{{$store.getters.nameG}}</p>
  <button @click="setMoudleAName('李danguner')">赋值</button>
</template>
<script>
import { ref } from "vue"
import { useStore } from 'vuex'
export default {
  setup () {
    const store = useStore()
    const setMoudleAName = (val) => {
      console.log(store, 'store')
      store.dispatch('moudleA/setName', val)
    }
    return {
      store,
      setMoudleAName
    }
  }
}
</script>
<style>
</style>

持久化

在这使用插件 vuex-persistedstate

1. 安装 npm install vuex-persistedstate
2. import createPersistedState from’vuex-persistedstate’
3. 使用

import { createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'

const moudleA = {
  namespaced: true,
  state: () => {
    return {
      name: ''
    }
  },
  mutations: {
    SET_NAME: (state, data) => {
      state.name = data
    }
  },
  actions: {
    setName: ({ commit }, data) => {
      commit('SET_NAME', data)
    }
  },
}
const store = createStore({
  state: {
    name1: '小七'
  },
  getters: {
    name1G (state) {
      return state.name1 + '**'
    },
    nameG (state) {
      return state.moudleA.name + '**'
    }
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    moudleA
  },
  plugins: [
    createPersistedstate({
      // 默认存储在localStorage 可改为sessionStorage
      storage: window.localStorage,
      // 本地存储数据的键名
      key: 'erabbit-client-pc-store',
      // 需要持持久话的模块 如果具体到模块下的某个数据 例如 user.token
      paths: ['moudleA']
    })
  ]
})

export default store

注意
===> 默认是存储在localStorage中
===> key是存储数据的键名
===> paths是存储state中的那些数据，如果是模块下具体的数据需要加上模块名称，如user.token
===> 修改state后触发才可以看到本地存储数据的的变化。