Vuex的创建使用

vuex是什么：就是用来存放所有组件数据的仓库

语法

引入vuex库  
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@2.0.0/dist/vuex.js"></script>

const store = new Vuex.Store({ // 单词大小写注意留心
  	// 仓库数据（状态 state  其实就是单个组件data）    sex:1
    state: { 键1:值1,...,键n:值n },
    // 仓库数据过滤    if == 1 男 女
    getters: { 方法名(state) {},.... },
    // 更新仓库数据（推荐方法名  get/set仓库中的键     
    // 更新state语法：state.键 = 值
    mutations: { 方法名(state [,参数]) {},.... },
    // 异步请求->调用mutations更新state数据	
    // 触发mutations语法：context.commit(mutations方法名 [,参数])
    actions: { 方法名(context) {},.... }  
})

state&getters都是在computed里面调用 -> 接着视图使用计算属性语法显示
mutations&actions都是在methods里面调用 -> 接着视图触发事件调用方法即可

使用

// 创建store对象通过 Vuex.Store
const store = new Vuex.Store({
    // 存放状态
    state: {
        age: 19,
        name: 'Jack'
    },
    // 过滤状态
    getters: {
        username(state) {
            return `hello ${state.name}`
        }
    },
    // 更新状态(commit触发)
    mutations: {
        setAge(state) {
            state.age += 1
        }
    },
    // 调用mutation（dispatch触发）
    actions: {
        setAge(context) {
            context.commit('setAge')
        }
    }
})

const vm = new Vue({
    // 激活
    store,
    el: '#app',
    data: {
        sex: "男"
    },
    // 通过computed来获取state和getters
    computed: {
        age() {
            return this.$store.state.age
        },
        username() {
            return this.$store.getters.username
        }
    },
    // 通过methods来存数据 -> 就是触发actions和mutations
    methods: {
       	// this.$store.dispatch(actions方法名, 参数)
       	// this.$store.commit(mutations方法名, 参数)
        testActionsFn() {
            this.$store.dispatch('setAge')  // 触发actions
        },
        testMutationsFn() {
            this.$store.commit('setAge')    // 触发mutations
        }
    }
})