VUE3 VUEX、pinia使用方法和原理

模块化路径 store/modules/user.js

const ModuleUser = {
    namespaced: true,//开启命名空间
    state: {
        id: "默认ID",
        username: "默认名字",
        photo: "默认头像",
    },
    getters: {
    },
    mutations: {//这是做同步操作
        updateUser(state,user){
            console.log(user)
            state.id = user.id;
            state.username = user.username;
        },
    },
    actions: {//写异步操作,actions提交给mutations
    },
    modules: {
    }
};
export default ModuleUser;

VUEX store/index.js

npm install —save vuex-persistedstate持久化插件安装

import {createStore} from 'vuex'
import createPersistedState from "vuex-persistedstate"
import user from './modules/user'
export default createStore{
    // 1.存储所有全局数据，可以把state理解为data,声明变量；mutations理解为method，声明方法
    state:{// 状态管理
        isLogin:true,
        num:2,
        num2:3
    },
    // 2.这里写计算属性，需要通过计算获取state里的内容获取的数据，只能读取不可修改
    getter:{
        tols:(state) => state.num+state.num2
    },
    // 3.定义对state的各种操作
      // why不直接实现在mutation里需要写到action里?
      // mtations不能执行异步操作。aq:从云端获取信息-->(等待云端反馈)更新到state异步操作
      // 因此说:对于异步操作需要放到action里，简单的直接赋值操作可以直接放到mutation里
    mutations:{//这里些方法， 模板通过commit提交修改state里面的数据
        sub(state,content){//第1是state状态状态数据，第2是commit提交收到的数据
            state.num=content+1
        }，
        add2(state){
          state.num++
        }
    },
    // 4、定义对state的各种操作
      // actions无法直接修改state，需要在mutations里更新
      // mutation不支持异步，所以需要在action里写api到url
    actions:{// Actions异步处理操作
        updatenum({commit},content) {
          commit('sub', content)
        }
    },
    modules:{// 模块划分，内容太多不会显得很臃肿。
        user
    },
    plugins: [createPersistedState({
        //储存的方式localStoragese、sessionStorage、cookies
        storage: window.localStorage,
        //存储的 key的key值
        key:'store',
        //要存储的数据:采用es6扩展运算符的方式存储了state中所有的数据
        reducer(state){
              return {...state}
        }
      })]
}

VUE单文件

<template>
<!-- 模板中直接使用状态 -->
    <div>{{$store.state.num}}</div>
    <button @click="$store.state.num++">{{ $store.state.num }}</button>
    <button @click="add()">add</button>
    <h3>使用 getter 中的计算属性购物车的总价：{{$store.getters.tols}}</h3>
</template>
<script setup>
import { useStore } from 'vuex'//引入vuex
const store = useStore()
function add(){
    //选项式写法
    //this.$store.commit('sub',555)//提交vuex的mutation里面的sub方法，第二个参数提交的数据。
    //this.$store.dispatch('demo', {count:88, name:'vuex'});//提交vuex的actions里面的sub方法，第二个参数提交的数据。
    //组合式api，setup语法糖写法
    /************* 不开启命名空间 *************/
    //mutations 方法调用
    store.commit('sub','参数')
    store.commit('user/sum', num) // 参数带上模块名称
    //actions 方法调用
    store.dispatch('方法名'','参数')
    store.dispatch('updatenum',99)
    store.commit('updateUser',{id:10,username:'张工'})//调用模块的方法
    store.state.user.username//调用模块的状态
    //getters 计算方法只读调用
    store.getters.tols.
    /************* 开启命名空间 *************/
    store.commit('user/updateUser',{id:10,username:'张工'})// 参数带上模块名称
    store.dispatch('user/sum_actions', sum)
}
const add2 = ()=>{
  store.commit('add')
}
</script>

pinia用法

import { defineStore } from 'pinia'
export const useStore = defineStore('storeId',{
  state: ()=>{
    return {
      msg:'pinia的数据'
    }
  },
  getters: {
  },
  actions: {//这里写异步和同步
  },
})

pinia使用方法

<template>
  <div>
    {{msg}}
  </div>
</template>
<script setup>
import { useStore } from '../../store/index'
const store = useStore()
const msg = store
</script>

总结VUEX

vue中可以直接触发methods中的方法，vuex是不可以的。未来处理异步，当触发事件的时候，会通过dispatch来访问actions中的方法，actions中的commit会触发mutations中的方法从面修改state里的值，通过geetter把数据更新到视图

Vue.use(vuex)，调用install方法，通过applyMixin(vue)在任意组件内执行this.$store就可以访问到store对象。vuex的state是响应式的，借助的就是vue的data，把state存到vue实例组件的data中