vuex - 不使用命名空间

1 npm i vuex -s

2 初始化/src/store/index.js中的内容

import Vue from 'vue'
import Vuex from 'vuex'

//挂载Vuex
Vue.use(Vuex)

//创建VueX对象
const store = new Vuex.Store({
    state:{
        //存放的键值对就是所要管理的状态
        name:'helloVueX',
        age:18
    }
})

export default store

3 将store挂载到当前项目的Vue实例当中去

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,  //store:store 和router一样，将我们创建的Vuex实例挂载到这个vue实例中
  render: h => h(App)
})

4 使用

<template>
    <div id='app'>
        name:
        <h1>{{ $store.state.name }}</h1>
        <h1>{{ name }}</h1>
    </div>
</template>
<script>
export default {
  computed: {
    count() {
      return this.$store.state.name
    }
  },
}
</script>

5 其他细节

mutations
mutations方法都有默认的形参：
([state] [,payload])
state是当前VueX对象中的state
payload是该方法在被调用时传递参数使用的
在vuex中的mutations方法，想调用mutations中的另外一方法，还是用commit,只需要使用this.commit('function')，当前的this指向的就是当前模块中的mutations；
this.commit('set_show_dialog_login', 'no')

    // mutations
    mutations:{
        edit(state){
            state.name = 'jack'
        }
    }
   mutations:{
         edit(state,payload){
             state.name = payload.name
            state.age = payload.age
             console.log(payload) // 15或{age:15,name:'aaa'}
         }
    }

    this.$store.commit('edit')
    this.$store.commit('edit',{age:15,name:'aaa'})

Actions
由于直接在mutation方法中进行异步操作，将会引起数据失效。所以提供了Actions来专门进行异步操作，最终提交mutation方法。
Actions中的方法有两个默认参数
context 上下文(相当于箭头函数中的this)对象
payload 挂载参数

actions:{
    aEdit(context,payload){
        // payload为传入的自定义参数
        setTimeout(()=>{
            context.commit('edit', payload)
        },2000)
    }
}

this.$store.dispatch('aEdit',{age:15})

getters
可以对state中的成员加工后传递给外界
Getters中的方法有两个默认参数
state 当前VueX对象中的状态对象
getters 当前getters对象，用于将getters下的其他getter拿来用

getters:{
    nameInfo(state){
        return "姓名:"+state.name
    },
    fullInfo(state,getters){
        return getters.nameInfo+'年龄:'+state.age
    }  
}

this.$store.getters.fullInfo

无命名空间
this.$store.state.name
this.$store.commit("setName", 'aaa')
this.$store.dispatch("getUserInfo", {id:15})
this.$store.getters.Name

有命名空间
this.$store.state.user.name
this.$store.commit("user/setName", 'aaa')
this.$store.dispatch("user/getUserInfo", {id:15})
this.$store.getters['user/Name']