对vue的了解之vuex篇

1.下载vuex的包管理   npm i vuex@3.0.0

2.在src路径里面创建一个store文件夹，再创建一个index.js文件

//store->index.js里面的内容

import Vue from "vue"
import vuex from "vuex"
Vue.use(vuex)
let store = new vuex.Store({
    //store是vuex的仓库
    state: {
        //要管理的内容,组件之间可以共享state里面的数据，用页面也可以共享数据
        num: 0
    },
    mutations: {

    },
    actions: {},
    getters: {

    },
    modules: {}
})

//导出文件，方便挂载，便于使用
export default store

3.导出之后去main.js里面注册并挂载跟组件app

//main.js文件内容
import Vue from 'vue'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
//引入axios
import axios from "axios"
//引入管理器文件，默认找index
import store from "@store"

new Vue({
  //使用vuex
  store,
  //路由
  router,
  render: h => h(App)
}).$mount('#app')

4.项目实操

        4.1 $store.state.num   简单使用

        4.2   也可以这样使用    computed: mapState([ "num",   ]),

<template>
  <div>
    <h1>HelloWorld</h1>
<!--也可以这样写-->
    <p>{{ num }}</p>
  </div>
</template>
<script>
//辅助函数
import { mapState } from "vuex";
export default {
  data() {
    return {};
  },
  computed: mapState([
    //写入要映射的值
    "num",
  ]),
  methods: {},
  created() {},
};
</script>

        4.3.在严格模式下strict: true,    actions更改state里面的数据会报错，

//也是用来更改状态，但是它不直接更改state的状态，而是通过提交mutations更改state状态
    actions: {
        //context 上下文参数
        addNum2(context) {
            console.log(context);
            context.state.num2 += 10
        }
    },