@vuex

首先配置下载并配置

npm i vuex

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
const app = createApp(App)
app.use(store)

app.mount('#app')

了解属性及方法

import { createStore } from 'vuex'



//实例化store
export default createStore({
    state:{

    },
    getters:{ //定义计算方法 

    },
    mutations:{ //定义同步方法
        
    },
    actions:{ //定义异步方法 

    },
    modules:{ //以模块化的方式管理state数据
     
    },
    plugins:[ ]//配合其他插件管理state中的数据
})

state：负责存储数据

getters：定义计算方法（类似计算属性，必须有返回值）

mutations：定义同步方法（可以直接修改state中的数据）

actions：定义异步方法（执行异步代码，但是不能直接修改state中的数据）

modules：模块化管理state中的数据（一般state中的一个值，与他相关的全部写到一个模                        块里，然后导入进来，利于管理）

 import tasklist from './modules/tasklist'
import shopcart from './modules/shopcart'
 modules:{ //以模块化的方式管理state数据( 这里决定了每个模块的名字 )
        Gwc:tasklist,
        My:shopcart,
    },

plugins：配合其他插件管理state中的数据（比如createLogger（）打印日志）

映射 

mapActions（）将vuex中的异步方法映射到当前组件；导入至方法中

mapMutations（）将vuex中的同步方法映射到当前组件；导入至方法中

mapState（）将vuex中的数据映射到当前组件；导入至计算属性中

mapGetters（）将vuex中的计算方法映射到当前组件；导入至计算属性中

  一般会先展开一下
...mapActions( 'add', [ 'addGwc' ,'deleteGWc'] )
再调用
  this.addGWc(id);

this.$stoer.commit  //同

commit：同步操作，写法：this.$store.commit(‘mutations方法名’,值)

this.$stoer.disatch //异

dispatch：含有异步操作，例如向后台提交数据，写法： this.$store.dispatch(‘action方法名’,值)