vue的vuex状态仓库的使用

1.按照规范化流程
创建store目录创建index.js文件

import Vue from 'vue'
import Vuex from 'vuex'
import getters from "./getters";
import actions from "./actions";
import mutations from "./mutation";
import moduleA from "./module/moduleA";
// import {
//   INCREMENT
// } from './mutations-types'
//安装插件
Vue.use(Vuex)
const state={
  count:100,
  books:{
    name:'zhangsan',
    age:45
  }
}
//创建对象
const store=new Vuex.Store(
  {
    //保存状态
   state,
   //方法的书写
    mutations,
    //进行异步操作  dispartch进行访问
    actions,
    //对数据进行处理
    getters,
    //扩充
    modules:{
     a:moduleA,
      //会将a放到states中
    }
  }
)
export default store

2.mutations方法的书写

import {
  INCREMENT
} from './mutations-types'
export  default  {
  //方法
  [INCREMENT](state){
    state.count++
    //响应式添加对象的属性
    //Vue.set(state.books,'price',25)
    //响应式删除对象的属性
    Vue.delete(state.books,'name')
  },
  decrement(state)
  {
    state.count--
  },
  add(state,number){
    state.count+=number
  }
}

3.action.js 异步文件的书写

export default
{
  addcon(context)
  {
    setTimeout(()=>{
      context.commit('add')
    },1000)
  }
}

3.getters.js 主要是对数据的处理

export  default {
  powerCenter(state){
    return state.count*state.count
  },
  powerCenter1(state,getter){
    return getter.powerCenter-2;
  },
  powerCenter2(state){
    return function (age) {
      return age;
    }
  },

}

4.moduleA.js 文件

export default {
  state:{
    name:"zhangsan",
  },
  mutations:{
    updatename(state,payload){
      state.name+=payload;
    }
  }
}

其他组件中使用vuex状态仓库：
调用vuex中的mutations中的方法使用

 this.$store.commit('decrement')
 //有参数
  updatename(){
      this.$store.commit("updatename",5555)
    }

获取vuex中的state中的参数值

{{$store.state.count}}

调用getters中的方法

{{$store.getters.powerCenter}}

调用moduleA中的name值

module中的name值+{{$store.state.a.name}}

mutations-types.js常量：

export const INCREMENT = 'increment'

引用

<template>
  <div id="app">
<!--    replace 禁止网页返回  tag 图标显示样式-->
<router-link to="/home" tag="button" replace>首页</router-link>
<router-link to="/about" replace>关于</router-link>
    <router-view></router-view>
    <button @click="home">首页</button>
    <button @click="about">详情页</button>
    <router-link :to="/user/+name" replace>用户</router-link>
    <router-link :to="{path:'/profile',query:{name1:'zhangsan'}}">档案</router-link>
    <button @click="dangan">档案</button>
    <h1><button @click="add1">+</button>{{$store.state.count}}<button @click="declare">-</button>
      <button @click="add2(5)">+5</button><button @click="add2(10)">+10</button></h1>
    <h1>{{$store.getters.powerCenter}}</h1>
    <h1>{{$store.getters. powerCenter1}}</h1>
    <h1>{{$store.getters. powerCenter2(15)}}</h1>
    <h1>{{$store.state.books}}</h1>
    <h1>module中的name值+{{$store.state.a.name}}</h1>
    <button @click="updatename">修改名字</button>
  </div>
</template>
<script>
  import HelloWorld from "./components/HelloWorld";
  import {
   INCREMENT
  } from './store/mutations-types'
export default {
  name: 'App',
  data(){
    return {
      name:'zhangsan222',
      book:[{
        name:'斗罗大陆',
        price:25,
    },{name:'秦史明月',
      price: 253}]
    }
  },
  methods:{
    home(){
      // 通过代码的方式修改路径
     console.log("home")
      // this.$router.push("/home")
      // 返回失效
      this.$router.replace("/home")

    },
    about(){
      // console.log("about")
      // this.$router.push("/about")
      // 返回失效
      this.$router.replace("/about")
    },
    dangan(){
      this.$router.push({
        path:'/profile',
        query:this.book
      })
    },
    add1(){
      this.$store.commit(INCREMENT)
    },
    declare(){
      this.$store.commit('decrement')
    },
    add2(count){
      this.$store.commit('add',count)
      // const stu={name:'zhangsan',age:12}
      // this.$store.commit('add',stu)
    },
    updatename(){
      this.$store.commit("updatename",5555)
    }
  },


}
</script>

main.js 进行挂载

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,
  render: h => h(App)
})