Vuex使用

未分类

state

• 新增状态写入src -> store -> index.js

const state = {
  newAdd: '新增状态',
}

mutation

mutation-types

• 新增状态改变方法,方法名写入 src -> store -> mutation-types.js，方便团队协作，方法名以大写字母命名

export const CHNAGE_NEWADD = 'CHNAGE_NEWADD'

mutations

• 在src -> store -> mutations.js中写入具体方法

// 引入方法名
import {
  CHNAGE_NEWADD,
} from './mutation-types.js'
// 添加具体方法
export default {
  [CHNAGE_NEWADD] (state, newName) {
    state.newAdd = newName
  },
}

组件内使用

// 1.借助辅助方法,将state混入计算属性
import { mapState } from "vuex" 
computed: {
...mapState(["newAdd"]),
}
// 2.直接获取state值，自己写计算方法
computed: {
    myValue() {
        return '我的' + this.$store.state.newAdd
    }
}
// 触发mutation改变state,注意state只可通过mutation改变
methods: {
    changeAdd() {
        this.$store.commit('CHNAGE_NEWADD', '变化后的值')
    }
}