vue 中使用 vuex

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第14天，点击查看活动详情

1. 安装vuex npm install vuex --save
2. 初始化配置vuex 创建一个store文件夹默认index.js

import Vue from 'vue'
import Vuex from 'vuex'
import test from '../components/test.js'

Vue.use(Vuex)

export default new Vuex.Store({
    state:{
        one:5,
        two:6
    },
    mutations:{
        add(state){
            state.one += 1;
            state.two += 1;
        },
        reduce(state){
            state.one -= 1;
            state.two -= 1;
        }
    },
    getters:{
        res(state){
            return state.one + state.two;
        }
    },
})

3. 在main.js中引入

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/index.js'
new Vue({
  el:'#app',
  router,
  store,
  components:{App},
  template: '<App/>'
})

4. 组件引入使用

// import { mapState } from 'vuex'; // 也可以直接引入 从vuex中导入mapState
export default {
    mounted() {
        console.log(this.getName); 
    },
    computed:{
        getName() {
            return this.$store.state.name;
        }
    },
    // computed: {
    //    ...mapState(['name']), // 经过解构后，自动就添加到了计算属性中，此时就可以直接像访问计算属性一样访问它
    // },
}

【后续在当前文档跟新案列描述 当前只是适用与使用初期】