state为访问状态对象
Mutation为触发状态各人理解,这里做的是一些全局改变样式这种类似的操作
通过vue入口文件main.js里面开始
main.js
import store from './store/index'
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
写vuex的层
store/index.js
import Vue from 'vue' import Vuex from 'vuex' import state from './state' import mutations from './mutation' Vue.use(Vuex); export default new Vuex.Store({ state, mutations })
store/state.js
const state = { count : 44, bColor:"orange" } export default state;
store/mutation.js
const mutations = { jian(state){ state.count-- }, jia(state,n){ state.count+=n.a }, changeColor(state){ if(state.bColor == "orange"){ state.bColor = "blue" }else{ state.bColor = "orange" } } } export default mutations
调用vuex的组件层
<template> <div class="wrapper"> 我是list1_son {{$store.state.count}}-{{count}} <button @click="$store.commit('jia',num)">+</button> <!-- <button @click="jia(num)">+</button> --> <button @click="changeColor(bColor)">改变背景颜色</button> <div :style="{background:bColor}" class="text_bc">123</div> <button @click="jia(num)">+</button> <button @click="jian">-</button> </div> </template> <script> import { mapState, mapMutations } from "vuex"; export default { components: {}, props: {}, data() { return { num:{a:2}, }; }, watch: {}, //几种写法形式 // computed:{ // count(){ // return this.$store.state.count - 1 // } // }, // computed: mapState({ // count: state => state.count + this.num // }), //mapState简写在computed里;mapMutations简写在methods里 computed: { ...mapState({ count: state => state.count + 2, bColor: state => state.bColor }), }, methods: { //不简写的方法,直接在这里定义方法,在里面去传参 // jia(){ // let num = this.num; // this.$store.commit('jia',num) // }, //简写的方法必须在上面的@click="jia(num)"动态传参,目前只实现了这种形式 ...mapMutations({ jian: 'jian', jia:'jia', changeColor:'changeColor' }), }, created() { }, mounted() { console.log(this.$store.state.count); } }; </script> <style scoped> .wrapper { color: grey; } .text_bc{ background: orange; 100px; height:100px; display: flex; align-items: center; text-align: center; justify-content: center } </style>