首先配置下载并配置
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方法名’,值)