vue

vue/vue高阶/project1/src/App.vue

@@ -1,32 +1,72 @@
 <template>
-  <div id="app">
-    <nav>
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </nav>
-    <router-view/>
-  </div>
-</template>
+  <!-- 
+    state:数据存储
+    使用方法：
+    1.在生命周期中 通过this.$store.state.xxxx
+    2.在计算属性中 通过mapState辅助函数 进行结构 注意：从vueX中引入辅助函数
+    3.在template模板中,通过$store.state.xxx
 
-<style lang="scss">
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
+    getters:相当于computed
+    使用方法：
+    1.在生命周期中 通过this.$store.getters.xxxx
+    2.在计算属性中 通过mapGetters辅助函数 进行结构 注意：从vueX中引入辅助函数
+    3.在template模板中,通过$store.getters.xxx
 
-nav {
-  padding: 30px;
-
-  a {
-    font-weight: bold;
-    color: #2c3e50;
+    mutations 同步方法
+    使用方法：
+    1.再方法中 直接使用this.$store.commit("调用方法",参数1,参数2...)
+    2.引入辅助函数 mapMutations,在哪个方法前使用 就直接结构...mapMutations(['xxx']),使用this.xxx()
+    actions 异步方法
+    使用方法：
+    1.再方法中 直接使用this.$store.dispatch("调用方法")
+    2.引入辅助函数 mapActions,在哪个方法前使用 就直接结构...mapActions(['xxx']),使用this.xxx()
+    在store库中
+    封装异步方法 要注意context参数
+    调用同步 context.commit("方法")
+   -->
+  <div class="app">
+    <h1>VueX</h1>
+    <p>我叫{{names}},今年{{$store.state.age}}岁,来自{{ address }}</p>
+    <p>新闻数量：{{newsCount}}</p>
+    <p>新闻数量：{{$store.getters.newCount}}</p>
+    <p>新闻数量：{{newCount}}</p>
+    <button @click="add">加加</button>
+    <button @click="reduce">减减</button>
+  </div>
+</template>
 
-    &.router-link-exact-active {
-      color: #42b983;
+<script>
+import {mapState,mapGetters,mapMutations,mapActions} from 'vuex';
+export default {
+  data(){
+    return {
+      names:"",
+      newsCount:""
+    }
+  },
+  created(){
+    this.newsCount = this.$store.getters.newCount;
+    this.names = this.$store.state.name;
+  },
+  computed:{
+    ...mapState(["address"]),
+    ...mapGetters(["newCount"])
+  },
+  methods:{
+    add() {
+      this.$store.commit('addCount',10)
+    },
+    ...mapMutations(["reduceCount"]),
+    ...mapActions(['asyncReduce']),
+    reduce() {
+      this.asyncReduce()
+      // this.reduceCount();
+      // this.$store.dispatch("asyncReduce")
     }
   }
 }
-</style>
+</script>
+
+<style>
+
+</style>

vue/vue高阶/project1/src/store/index.js

@@ -1,17 +1,44 @@
+// 引入vue库
 import Vue from 'vue'
+// 引入vuex库
 import Vuex from 'vuex'
-
+// 使用vuex
 Vue.use(Vuex)
-
+// vuex适用于中大型项目
+// 小项目避免使用vuex
+// 默认抛出实例化后的vuex库
 export default new Vuex.Store({
+  //放置/存储数据
   state: {
+    name:"孙悟空",
+    age:18,
+    address:"花果山",
+    count: 1
   },
+  // getters相当于computed
   getters: {
+    newCount(state) {
+      return state.count * 2;
+    }
   },
+  // 同步
   mutations: {
+    addCount(state, num) {
+      state.count = state.count + num;
+    },
+    reduceCount(state) {
+      state.count--;
+    }
   },
+  // 异步
   actions: {
+    asyncReduce(context) {
+      setTimeout(()=>{  
+        context.commit("reduceCount")
+      },2000)
+    }
   },
+  // 模块化
   modules: {
   }
 })

vue/vue高阶/vuex.md

@@ -0,0 +1,27 @@
+## 组件库
+## 移动端
+## 1.Vant https://vant-ui.github.io/vant/#/zh-CN/home
+## 2.Cube https://didi.github.io/cube-ui/#/zh-CN/docs/button
+## 3.Mint https://mint-ui.github.io/#!/zh-cn
+## PC端
+## 1.iView https://www.iviewui.com/
+## 2.Element https://element.eleme.cn/#/zh-CN/component/installation
+
+## Element: 1.安装 2.在main.js中引用
+
+
+## VueX
+通过状态（数据源）集中管理驱动组件的变化。页面通过mapActions异步提交事件到actions。actions通过commit把对应参数同步提交到mutations。
+
+mutations会修改state中对于的值。 最后通过getters把对应值跑出去，在页面的计算属性中
+
+通过mapGetters来动态获取state中的值
+
+应用级的状态集中放在store中； 改变状态的方式是提交mutations，这是个同步的事物； 异步逻辑应该封装在actions中。
+
+state中保存着共有数据，数据是响应式的
+getters可以对state进行计算操作，主要用来过滤一些数据，可以在多组件之间复用
+mutations定义的方法动态修改state中的数据，通过commit提交方法，方法必须是同步的
+actions将mutations里面处理数据的方法变成异步的，就是异步操作数据，通store.dispatch来分发actions，把异步的方法写在actions中，通过commit提交mutations，进行修改数据。
+
+modules：模块化vueX