VUE08--{VUEX}

VUEX是什么

管理（修改或设置）组件用到的数据的工具。免除了之前组件传值的麻烦。组件传值

---

VUEX组成

官方图片

store
容器对象，储存state,mutations,actions,getters
state
保存数据的对象
mutations
保存函数的对象，只有mutations中的函数，才能更改state中数据的值，触发方式 this.$store.commit(param)（不支持异步操作）
actions
保存函数的对象，actions中的函数能够触发mutations中的函数，从而修改state中数据的值（支持异步操作）
getters
保存函数的对象，通过getters中的函数，可以计算依赖于state数据的新数据

---

VUEX使用步骤

1. 安装
终端运行npm i vuex -S，注意：生产环境中也需要使用
2.文件结构

文件结构

3.流程分析
（1）

• 新建store文件夹，在文件夹中创建store.js文件
• 在store.js中引入vuex，挂载vuex
• 将对应的数据或者函数分别写入对应的state、mutations、actions、getters
• 创建vuex实例并导出
  （2）
• 在main.js中引入store.js
• 在vue实例中注入store
  （3）
• 在components文件夹中新建decrement.vue和increment.vue
• 注意：组件提交mutations等的两种方法 | 如何传参 | mapXXXXX前一定要加... | mutations(commit) 、actions(dispatch)
  （4）
• 在App.vue中导入子组件
• 在App.vue导出对象中创建子组件
• 在坑中填上子组件
  4.文件内容
  （1）store.js

// 引入vue、vuex
import Vue from 'vue'
import Vuex from 'vuex'

// 挂载vuex
Vue.use(Vuex)

// 给vuex中的四个核心内容填值和方法
const state = {
    count : 0
}
const mutations = {
    // 加法
    increment: (state, n) => {
        state.count = state.count + n;
        return state.count
    },
    // 减法
    decrement: (state, n) => {
        state.count = state.count - n;
        return state.count
    },
    // 归零
    zero: state => state.count = 0,
    // 取负
    negate: state => state.count = -state.count
}
const actions = {
    zeroAct ({commit}) {
        commit('zero')
    },
    negateAct ({commit}) {
        commit('negate')
    }
}
const getters = {
    evenOrOdd: state => state.count % 2 === 0 ? '偶数' : '奇数'
}

// 创建vuex实例，并导出
export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters
})

（2）increment.vue

<template>
<div>
<br>
当前值为：
<el-tag type='success'>{{$store.state.count}}</el-tag>
<el-button @click="increment">+1</el-button>
<el-button @click="zero">归0</el-button>
</div>
</template>

<script>
// 案例演示两种提交mutations和actions的方法，incerement.vue里演示方法1，decrement.vue里演示方法2
export default {
    methods: {
        // 1. mutations -- commit
        increment() {
            this.$store.commit('increment', 1)
            console.log(this)
        },
        // 2. actions -- dispatch
        zero () {
            this.$store.dispatch("zeroAct")
        }
    }
}
</script>

<style scoped>

</style>

（3）decrement.vue

<template>
<div>
<br>
当前值为：
<el-tag type='success'>{{$store.state.count}}</el-tag>
<el-button @click="decrement(1)">-1</el-button>
<el-button @click="negateAct">取负</el-button>
<br><br>
{{evenOrOdd}}
</div>
</template>

<script>
// 案例演示两种提交mutations和actions的方法，incerement.vue里演示方法1，decrement.vue里演示方法2
import {mapMutations, mapActions, mapGetters} from 'vuex'
export default {
    methods: {
        // 1.前面要加... 2.mapMutations可以引入多个方法 3.([])注意结构
        ...mapMutations([
            'increment',
            'decrement'
        ]),
        ...mapActions([
            'negateAct'
        ]),
    },
    computed: {
        ...mapGetters([
            'evenOrOdd'
        ])
    }
}
</script>

<style scoped>

</style>

（4）main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

// 引入element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

// 挂载element-ui
Vue.use(ElementUI)

// 引入index.scss
import '@/styles/index.scss'

Vue.config.productionTip = false

// 引入store，并在vue实例中注入store
import store from '@/store/store'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

（5）App.vue

<template>
  <div id="app">
      vuex展示
    <increment></increment>
    <decrement></decrement>
    <router-view/>
  </div>
</template>

<script>
// 导入子组件
import increment from '@/components/increment'
import decrement from '@/components/decrement'

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

<style>
#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>

案例基础：vue-cli和element-ui

---

VUEX案例问题补充

• 页面刷新，store对象中state变量丢失怎么办？

使用localStorage。先存值，再赋值。