Vuex状态管理（数据不分块）

vuex

1. vuex是什么？
   • vuex是vue的状态管理工具
   • 状态就是数据
   • vuex是vue的一个插件
2. vuex有什么作用
   • 是用来存储状态的。 类似与：本地存储、cookie 、database(数据库)
   • 可以组件通讯，就是多组件共享状态，也就是多个组件共享一个状态
   • vuex可以用来管理状态称为状态管理
3. vuex在什么项目中使用？
   • 项目比较复杂的
   • 项目数据交互计较频繁的
   • 项目中服务端还有客户端绑定的数据较多的。 例如：表单
4. vuex流程图
   • vuex的核心组成部分
     • state 状态
     • actions 动作创建者 【如：用户点击】
     • mutations 动作触发者 【修改状态】
   • vuex和后端交互的是actions
   • vuex修改state的是mutations
5. vuex的流程

• vuex的流程作用是：让我们项目中的数据处理井然有序
  component --dispatch—>actions–commit–>mutations—mutate—>state---->component

vuex状态管理

• 一个项目中所有状态一起管理【一个文件管理】，数据不分块
• 一个项目状态分开管理 【对应功能，对应文件来管理】，数据分块

代码

数据不分块
使用

1. 用cli构建项目
2. 安装vuex
   • $yarn add vuex或cnpm i vue
3. 在src文件下建一个store（以后看到这个文件就知道是vuex），在store下见一个index.js
4. 在store–>index.js下
   • 引入需要的模块
   • 创建store对象

     /* 
     store
     储存和管理状态的一个仓库
     */
     
     //1. 引入需要的模块
     import Vue from 'vue'
     import Vuex from 'vuex'
     
     Vue.use(Vuex)
     
     //2. 创建store对象
     const store = new Vuex.Store(Option)
     
     export default store
     

5. 在main.js全局注入

   import Vue from 'vue'
   import App from './App.vue'
   import store from './store'
   
   Vue.config.productionTip = false
   
   new Vue({
     store,//目的是整个项目的组件都可以使用store的属性
     render: h => h(App),
   }).$mount('#app')
   
   

6. store下的index.js

   	/* 
   store
   储存和管理状态的一个仓库
   */
   //这是数据不分块
   //1. 引入需要的模块
   import Vue from 'vue'
   import Vuex from 'vuex'
   import {INCREMENT} from './actionType'
   
   Vue.use(Vuex)
   
   //2. 创建store对象
   // const store = new Vuex(Option)
   // const store = new Vuex(
     // state,//状态
     // actions, //动作创建者-放是方法,创建动作，发送动作
     // mutations,//动作执行者- 放的方法
     // getters,//获取状态【几乎不用】
     // moudules //做数据分块的
   // )
   const store = new Vuex.Store({
     state: {
       count: 0,
       todos:[
         {
         id:1,
         task: '任务一'
         },
         {
           id: 2,
           task: '任务二'
         }
       ]
     },//状态
     actions:{
       increment (store) {
         const action = {
           type: INCREMENT//这里是动作类型
         }
         store.commit(action)
       }
     }, //动作创建者 -创建动作，发送动作-放方法
     mutations: {
       INCREMENT (state,action) {
         //state就是状态， action就是actions发来的动作
         state.count ++
       }
     },//动作执行者-放方法（方法名称就是上面创建的动作类型）
     // getters,//获取状态【几乎不用】
     // moudules //做数据分块的
   })
   
   export default store
   

   • 在store下创建actionType.js用来存放动作类型的

     // export  这是可以导出多个
     // export default 只能导出一个
     export const INCREMENT = "INCREMENT"
     

7. 创建组件，到src下的–components下创建组件count.vue

<template>
  <div>
    <button @click="add">+</button>
    <p>count:{{this.$store.state.count}}</p>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log( this.$store)
  },
  methods: {
    add () {
      this.$store.dispatch('increment')//dispatch中参数为action方法中的名称(increment)
    }
  }
}
</script>

8. 在App.vue中使用组件

<template>
  <div id="app">
    <Count/>
  </div>
</template>

<script>
import Count from './components/count'

export default {
  name: 'App',
  components: {
    Count
  }
}
</script>

<style lang="stylus">
#app
  font-family Avenir, Helvetica, Arial, sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  text-align center
  color #2c3e50
  margin-top 60px
</style>